72 lines
3.2 KiB
JavaScript
72 lines
3.2 KiB
JavaScript
"use client";
|
|
|
|
export default function Header({ currentToken, previousToken, nextToken, missedTokens }) {
|
|
// Extract missed tokens from props or calculate them
|
|
const missedTokensList = missedTokens || "J-134, J-159"; // Default or from props
|
|
|
|
return (
|
|
<div className="flex grow flex-col items-center justify-between lg:flex-row lg:px-6 w-full">
|
|
<div className="hidden sm:hidden md:hidden lg:block lg:gap-16 lg:w-full lg:px-6 lg:py-3 xl:flex xl:gap-4 xl:w-full xl:px-6 2xl:flex 2xl:gap-16 2xl:w-full 2xl:px-6">
|
|
<div className="flex flex-col gap-3">
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{[1, 2, 3, 4].map((item) => (
|
|
<div
|
|
key={item}
|
|
className="border-2 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]"
|
|
>
|
|
<h2 className="text-[14px] text-[#667085]">Total Patients</h2>
|
|
<div className="flex gap-5 -mt-1">
|
|
<p className="text-[25px]">345</p>
|
|
<p className="text-[8px] text-[#667085] mt-[18px]">
|
|
<span className="text-green-400">+25%</span> vs Last Week
|
|
</p>
|
|
</div>
|
|
<button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
|
|
View List
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="w-[43rem] h-[auto] border-2 rounded-[10px] px-2 py-2 flex flex-col gap-2">
|
|
<h2 className="text-[14px] text-[#667085]">Missed Token</h2>
|
|
<p className="text-[19px]">
|
|
{missedTokensList}
|
|
</p>
|
|
<button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
|
|
View List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:border-2 lg:rounded-[10px] lg:px-6 lg:py-6 lg:w-[50%] lg:h-[auto] lg:flex-col lg:items-center lg:gap-5 lg:hidden xl:block xl:border-2 xl:rounded-[10px] xl:px-6 xl:py-6 xl:w-[50%] xl:h-[full] xl:flex xl:flex-col xl:items-center xl:gap-5 2xl:border-2 2xl:rounded-[10px] 2xl:px-8 2xl:pt-6 2xl:pb-8 2xl:w-[50%] 2xl:h-[15rem] 2xl:flex 2xl:flex-col 2xl:items-center 2xl:gap-5">
|
|
<div>
|
|
<h2 className="text-[14px] text-[#667085]">Current Token</h2>
|
|
<p className="font-bold text-[25px] text-center">
|
|
{currentToken || "---"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center gap-5 2xl:gap-[6rem]">
|
|
<div>
|
|
<h2 className="text-[14px] text-[#667085]">Previous Token</h2>
|
|
<p className="font-bold text-red-500 text-[25px] text-center">
|
|
{previousToken || "---"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-[14px] text-[#667085]">Next Token</h2>
|
|
<p className="text-green-500 font-bold text-[25px] text-center">
|
|
{nextToken || "---"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[6px] w-full rounded-[4px] 2xl:text-[12px]">
|
|
View List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |