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-primary-500 p-5 rounded-xl ">
            <div className="flex">
              <div>
                <svg
                  width="70"
                  height="70"
                  viewBox="0 0 250 250"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M51.45 226.087C35.5004 214.498 22.5227 199.296 13.5799 181.725C4.63707 164.155 -0.0165936 144.716 4.44572e-05 125C4.44572e-05 55.9625 55.9626 0 125 0C194.038 0 250 55.9625 250 125C250.017 144.716 245.363 164.155 236.42 181.725C227.477 199.296 214.5 214.498 198.55 226.087L185.863 204.35C202.442 191.632 214.622 174.04 220.69 154.045C226.759 134.05 226.411 112.656 219.696 92.8684C212.981 73.0809 200.236 55.8941 183.251 43.722C166.267 31.55 145.896 25.0042 125 25.0042C104.104 25.0042 83.7333 31.55 66.7488 43.722C49.7642 55.8941 37.0193 73.0809 30.3043 92.8684C23.5892 112.656 23.2414 134.05 29.3098 154.045C35.3781 174.04 47.5576 191.632 64.1375 204.35L51.45 226.087ZM76.875 182.525C65.0629 172.643 56.5793 159.364 52.5769 144.492C48.5746 129.62 49.2475 113.877 54.5044 99.4013C59.7612 84.9254 69.347 72.4187 81.9593 63.5806C94.5717 54.7424 109.599 50.0012 125 50.0012C140.401 50.0012 155.428 54.7424 168.041 63.5806C180.653 72.4187 190.239 84.9254 195.496 99.4013C200.753 113.877 201.425 129.62 197.423 144.492C193.421 159.364 184.937 172.643 173.125 182.525L160.25 160.45C167.272 153.469 172.064 144.561 174.017 134.854C175.971 125.146 174.998 115.078 171.222 105.924C167.447 96.7706 161.038 88.9441 152.809 83.4368C144.581 77.9296 134.902 74.9896 125 74.9896C115.098 74.9896 105.42 77.9296 97.1906 83.4368C88.9617 88.9441 82.5533 96.7706 78.7777 105.924C75.002 115.078 74.0293 125.146 75.9827 134.854C77.9361 144.561 82.7277 153.469 89.75 160.45L76.875 182.525ZM112.5 137.5H137.5L150 250H100L112.5 137.5Z"
                    fill="white"
                  />
                </svg>
              </div>

              <p className="mb-0 text-white mx-4 font-semibold">
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
                استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
                در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
                نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
                کتابهای زیادی در شصت و سه درصد گذشته حال و آینده{" "}
              </p>
            </div>
            <div className="flex justify-end m-3">
              <button className="btn btn-light text-sm py-2 rounded-full px-5">
                خرید ادامـــــه دارد
              </button>
            </div>
          </div>

          <div className="bg-gray-200 p-5 mt-5">
            <p className="mb-0 font-bold">سفارش جاری</p>

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

export default page;
