72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import Typography, {
|
|
TypographyProps,
|
|
} from "@/components/ui/Typography/Typography";
|
|
import { useTimer, UseTimerOptions } from "@/hooks/timer/useTimer";
|
|
|
|
interface HeaderProps extends React.ComponentProps<"header"> {
|
|
button?: React.ComponentProps<typeof Button>;
|
|
timerHookProps?: UseTimerOptions;
|
|
timer?: TypographyProps<"span">;
|
|
text?: TypographyProps<"p">;
|
|
}
|
|
|
|
export default function Header({
|
|
button,
|
|
text,
|
|
timerHookProps,
|
|
timer,
|
|
...props
|
|
}: HeaderProps) {
|
|
const { time } = useTimer({
|
|
initialSeconds: timerHookProps?.initialSeconds || 600,
|
|
...timerHookProps,
|
|
});
|
|
|
|
return (
|
|
<header
|
|
{...props}
|
|
className={cn(
|
|
"w-full",
|
|
"bg-gradient-to-r from-[#FFFBEB] to-[#FFF7ED]",
|
|
"p-4 min-h-[96px]",
|
|
"flex justify-between items-center",
|
|
"border-2 border-[#FDE68A] rounded-[12px]",
|
|
"shadow-[0px_4px_6px_0px_#0000001A]",
|
|
props.className
|
|
)}
|
|
>
|
|
<div className="flex flex-col">
|
|
{text && (
|
|
<Typography
|
|
size="sm"
|
|
weight="semiBold"
|
|
font="inter"
|
|
{...text}
|
|
className={cn("leading-[20px] text-[#92400E]", text.className)}
|
|
/>
|
|
)}
|
|
<Typography
|
|
size="2xl"
|
|
weight="bold"
|
|
font="inter"
|
|
{...timer}
|
|
className={cn("leading-[32px] text-[#78350F]", timer?.className)}
|
|
>
|
|
{time}
|
|
</Typography>
|
|
</div>
|
|
{button && (
|
|
<Button
|
|
{...button}
|
|
className={cn(
|
|
"bg-[#D9780E]! rounded-[8px] font-inter py-2 px-6 font-bold animate-scale-pulse",
|
|
button.className
|
|
)}
|
|
/>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|