import Navbar from "@comp/Navbar/page";
import React from "react";

const page = () => {
  return (
    <>
      <Navbar theme={1} />
      <div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5  rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
        <div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden">
          <div>
            <div className="bg-white rounded-b-3xl p-5 flex shadow">
              <div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>

              <div className="m-3">
                <p className="mb-0 text-sm">حسین معصومی پور</p>
                <p className="mb-0 text-sm">09123654891</p>
              </div>
            </div>

            <ul className="p-2 ">
              <li className="group cursor-pointer">
                <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                    داشبورد
                  </p>
                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                </div>
              </li>

              <li className="group cursor-pointer">
                <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                    سفارشات
                  </p>
                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                </div>
              </li>

              <li className="group cursor-pointer">
                <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                    پیگیری سفارش
                  </p>
                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                </div>
              </li>

              <li className="group cursor-pointer">
                <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                  <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                    پشتیبانی{" "}
                  </p>
                  <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                </div>
              </li>

              <li className="flex justify-between p-4 rounded-full  group hover:bg-red-200 tr03 cursor-pointer">
                <p className="mb-0 text-sm text-red-500 group-hover: ">خروج </p>
                <div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
              </li>
            </ul>
          </div>
        </div>

        <div className="lg:col-span-3 xl:col-span-4 ">
          <div className="bg-gray-200 p-5 mt-5">
            <p className="mb-0 font-bold">سابقه سفارشات</p>

            <div className="flex rounded-full bg-gray-300 mt-3 w-fit p-2">
              <div className="bg-primary-500 py-2 rounded-full px-5">
                <p className="mb-0 text-white"> جاری</p>
              </div>
              <div className=" py-2 rounded-full px-5">
                <p className="mb-0">تحویل شده</p>
              </div>
              <div className=" py-2 rounded-full px-5">
                <p className="mb-0">مرجوع شده</p>
              </div>
              <div className=" py-2 rounded-full px-5">
                <p className="mb-0">لغو شده</p>
              </div>
            </div>

            <div className="flex justify-center my-[100px]">
              <p className="mb-0  rounded-full w-fit shadow bg-white p-5 ">
                شما سفارشی ندارید
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default page;