77 lines
3.7 KiB
JavaScript
77 lines
3.7 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import CalendarAdD from "@/components/icons/CalendarAdD";
|
|
import CardTickD from "@/components/icons/CardTickD";
|
|
import { getParsedUserInfo } from "@/helper";
|
|
import Image from "next/image";
|
|
|
|
function Head({ user }) {
|
|
// مقدار اولیه از prop سرور تا SSR و کلاینت یکسان باشند (جلوگیری از hydration mismatch)؛
|
|
// سپس در کلاینت نام واقعی از کوکی userInfo خوانده میشود.
|
|
const [displayName, setDisplayName] = useState(user?.name || "کاربر");
|
|
|
|
useEffect(() => {
|
|
const userInfo = getParsedUserInfo();
|
|
const name = userInfo?.realName || user?.name;
|
|
if (name) setDisplayName(name);
|
|
}, [user?.name]);
|
|
|
|
return (
|
|
<div className="hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]">
|
|
<div className="bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center">
|
|
<div className="flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]">
|
|
<p className="text-[#3B3B3B] text-[16px] font-bold">
|
|
{displayName}{" "}
|
|
<span className="text-[#3B3B3B] text-[16px] font-normal">
|
|
عزیز!
|
|
</span>
|
|
</p>
|
|
<p className="text-[#616161] text-[12px] font-normal">
|
|
در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده را مدیریت
|
|
کنید.{" "}
|
|
</p>
|
|
</div>
|
|
<Image
|
|
className="w-[120px] lg:w-[140px] xl:w-[170px] xl:min-w-[170px] h-fit absolute bottom-0 left-[3%] md:left-[5%] lg:left-[9%]"
|
|
src="/assets/images/male-doctor-head-dashboard.png"
|
|
alt="doctor"
|
|
height={175}
|
|
width={171}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col md:flex-row lg:flex-col items-start justify-start gap-[12px]">
|
|
<div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
|
<div className="bg-[#5559CE] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
|
|
<CardTickD />
|
|
</div>
|
|
<div className="flex flex-col gap-[8px] items-start justify-start">
|
|
<p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
|
|
{Number(user?.total_transactions || 0).toLocaleString("fa-IR")}{" "}
|
|
<span className="text-[12px]">تومان</span>
|
|
</p>
|
|
<h1 className="text-[#616161] text-nowrap text-[14px] font-normal">
|
|
مجموع تراکنش ها
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
|
<div className="bg-[#FFC051] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
|
|
<CalendarAdD />
|
|
</div>
|
|
<div className="flex flex-col gap-[8px] items-start justify-start">
|
|
<p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
|
|
{Number(user?.number_of_turns || 0).toLocaleString("fa-IR")}
|
|
</p>
|
|
<p className="text-[#616161] text-nowrap text-[14px] font-normal">
|
|
تعداد نوبت های شما
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Head;
|