Notes

"use client"
import Image from "next/image";
import CommonText from "@/app/component/CommonText";
import { useRouter } from "next/navigation";

export default function Seller() {
const router = useRouter();
const handleBackButton = () => {
router.push("/auth/signUp");
};
return (
<>
<section className="bg-gray-50 dark:bg-white">
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<CommonText/>
<form className="space-y-4 md:space-y-6" action="#">
<div>
<label
htmlFor="accountType"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
I am a
</label>
<select
id="accountType"
name="accountType"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
>
<option value="seller">Seller</option>
<option value="buyer">Buyer</option>
</select>
</div>

<div>
<label
htmlFor="name"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Name
</label>
<input
type="text"
name="name"
id="name"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Your Name"
required
/>
</div>
<div>
<label
htmlFor="number"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Contact Number
</label>
<input
type="number"
name="number"
id="number"
placeholder="9876543210"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
/>
</div>

{/* Requirement Category Dropdown */}
<div>
<label
htmlFor="category"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Listing Category
</label>
<select
id="category"
name="category"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
>
<option value="">Select Category</option>
<option value="IT">IT Services</option>
<option value="marketing">Marketing</option>
<option value="design">Design</option>
<option value="consulting">Consulting</option>
<option value="others">Others</option>
</select>
</div>

<div>
<label
htmlFor="text"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Product Name
</label>
<input
type="text"
name="text"
id="text"
placeholder=""
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
/>
</div>

<div>
<label
htmlFor="fileUpload"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Photo/Video of listing
</label>
<input
type="file"
id="fileUpload"
name="fileUpload"
accept="image/*,video/*"
className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
/>

</div>

<div>
<label
htmlFor="text"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Minimum Order Quantity
</label>
<input
type="text"
name="text"
id="text"
placeholder=""
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
/>
</div>

<div>
<label
htmlFor="number"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Selling Price
</label>
<input
type="text"
name="text"
id="text"
placeholder=""
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
/>
</div>

{/* Location Dropdown */}
<div>
<label
htmlFor="location"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-black"
>
Location
</label>
<select
id="location"
name="location"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
>
<option value="">Select Location</option>
<option value="New York">New York</option>
<option value="Los Angeles">Los Angeles</option>
<option value="Chicago">Chicago</option>
<option value="Houston">Houston</option>
<option value="San Francisco">San Francisco</option>
</select>
</div>




<div className="flex items-start">
<div className="flex items-center h-5">
<input
id="terms"
aria-describedby="terms"
type="checkbox"
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required
/>
</div>
<div className="ml-3 text-sm">
<label
htmlFor="terms"
className="font-light text-gray-500 dark:text-black"
>
I accept the{" "}
<a
className="font-medium text-primary-600 hover:underline dark:text-primary-500"
href="#"
>
Terms and Conditions
</a>
</label>
</div>
</div>
<button
type="submit"
className="w-full text-black bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Create an account
</button>
<p className="text-sm font-light text-gray-500 dark:text-black">
Already have an account?{" "}
<a
href="#"
className="font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Login here
</a>
</p>
</form>
<button
type="button"
className="flex items-center justify-center p-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:bg-green-700 dark:focus:ring-gray-600"
onClick={handleBackButton}
>
<svg
className="w-6 h-6 text-green-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 5H1m0 0 4 4M1 5l4-4"
/>
</svg>
</button>
<button
type="button"
class="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
>
Green
</button>
</div>
</div>
</div>
</section>
</>
);
}