Files
nobat724_front/components/layoutPanel/userDetail/Head.js
T

61 lines
2.3 KiB
JavaScript

import CircularLoading from "@/app/component/loading/Circular";
import TextLoading from "@/app/component/loading/Text";
import ArrowLeftBlueP from "@/components/icons/ArrowLeftBlueP";
import LocationP from "@/components/icons/LocationP";
import { Button } from "@mui/material";
import Image from "next/image";
import React from "react";
function Head({ data, loading }) {
return (
<div className="flex w-full flex-col items-center justify-start">
<CircularLoading width={80} height={80} loading={loading}>
<Image src={data.src} height={80} width={80} alt="profile" />
</CircularLoading>
<div className={loading ? "mt-[8px] mb-[4px]" : ""}>
<TextLoading width={60} height={18} loading={loading}>
<p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px]">
{data.name}
</p>
</TextLoading>
</div>
<div className="flex items-center justify-center gap-[8px]">
<LocationP />
<TextLoading width={55} height={16} loading={loading}>
<p className="text-[#7E7E7E] text-[14px] font-normal">
نماینده شهر اهواز
</p>
</TextLoading>
</div>
<div className="flex items-center justify-center my-[16px]">
<div className="flex flex-col items-center justify-center">
<p className="text-[#9B9B9B] text-[14px] font-normal">کل بیماران</p>
<TextLoading width={55} height={16} loading={loading}>
<p className="text-[#3B3B3B] text-[14px] font-medium">
{data.all_patients}
</p>
</TextLoading>
</div>
<span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px]"></span>
<div className="flex flex-col items-center justify-center">
<p className="text-[#9B9B9B] text-[14px] font-normal">کل نوبت ها</p>
<TextLoading width={55} height={16} loading={loading}>
<p className="text-[#3B3B3B] text-[14px] font-medium">
{data.total_turns}
</p>
</TextLoading>
</div>
</div>
<Button
className="!flex !p-1 !items-center !justify-center !text-[#5559CE] !text-[14px] !font-medium"
variant="text"
>
مشاهده اطلاعات نماینده
<ArrowLeftBlueP />
</Button>
</div>
);
}
export default Head;