| import { memo } from "react"; |
| import { cn } from "@/lib/cn"; |
| import { |
| getDayOfMonth, |
| getHeaderDayLabel, |
| getHeaderMonthYearLabel, |
| } from "@/utils/dates"; |
| import { Button, PlusIcon } from "@/components/ui"; |
|
|
| interface ScheduleHeaderProps { |
| selectedDate: Date; |
| onAddClass: () => void; |
| } |
|
|
| export const ScheduleHeader = memo(function ScheduleHeader({ |
| selectedDate, |
| onAddClass, |
| }: ScheduleHeaderProps) { |
| return ( |
| <header className="flex items-start justify-between mb-6 md:mb-8"> |
| <div className="flex items-baseline gap-2"> |
| <div className="relative"> |
| <span className="block text-5xl md:text-7xl font-bold text-content tracking-tight leading-none"> |
| {getDayOfMonth(selectedDate)} |
| </span> |
| <span className="absolute bottom-0 left-0 right-0 h-1 rounded-full bg-[#667EEA]" /> |
| </div> |
| <div className="flex flex-col justify-end pb-1"> |
| <span className="text-sm md:text-base font-medium text-content-secondary leading-tight"> |
| {getHeaderDayLabel(selectedDate)} |
| </span> |
| <span className="text-sm md:text-base font-medium text-content-secondary leading-tight"> |
| {getHeaderMonthYearLabel(selectedDate)} |
| </span> |
| </div> |
| </div> |
| |
| <Button |
| onClick={onAddClass} |
| size="lg" |
| leftIcon={<PlusIcon size={16} />} |
| className={cn("w-auto h-[48px] px-6", "rounded-btn shadow-button-glow")} |
| > |
| Add Class |
| </Button> |
| </header> |
| ); |
| }); |
|
|
