import Navbar from "../../components/Elements/Navbar";
import CardProduct from "../../components/Elements/CardProduct";
import Pagination from "../../components/Elements/Pagination";
import Footer from "../../components/Elements/Footer";


const SeeMore = () => {
  return (
    <>
      <div className="grid  gap-3 ">
        <Navbar name="Dasboard"></Navbar>
        <div className="w-full flex justify-between border-2 border-x-transparent py-1 items-center">
          <div className="mx-2">
            <h1 className="text-md font-bold">NEW PRODUCTS</h1>
          </div>
          {/* Dropdown */}
          <div className="hs-dropdown relative inline-flex z-50">
            <button
              type="button"
              className="hs-dropdown-toggle py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg"
              aria-haspopup="menu"
              aria-expanded="false"
              aria-label="Dropdown"
            >
              Sort By
              <svg
                className="hs-dropdown-open:rotate-180 size-4"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="m6 9 6 6 6-6" />
              </svg>
            </button>
            <div
              className="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg p-1 space-y-0.5 mt-2 z-50"
              role="menu"
              aria-orientation="vertical"
              aria-labelledby="hs-dropdown-default"
            >
              <a
                className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
                href="#"
              >
                High Price
              </a>
              <a
                className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
                href="#"
              >
                Low Price
              </a>
              <a
                className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
                href="#"
              >
                Ratting
              </a>
            </div>
          </div>
          {/* End Dropdown */}
        </div>
        <div className="grid grid-cols-2 gap-4  md:grid-cols-4 xl:grid-cols-6 lg:grid-cols-5">
          <CardProduct />
          <CardProduct />
          <CardProduct />
          <CardProduct />
          <CardProduct />
          <CardProduct />
        </div>

       
          <Pagination />
       
        <Footer />
      </div>

    </>
  )
}

export default SeeMore;
