68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
interface MonthItem {
|
|
id: string;
|
|
label: string;
|
|
start: string;
|
|
end: string;
|
|
}
|
|
|
|
// interface CurrentDay {
|
|
// start: string;
|
|
// end: string;
|
|
// month: string;
|
|
// }
|
|
|
|
interface CalendarProps {
|
|
title: string;
|
|
nextYearHandler: () => void;
|
|
prevYearHandler: () => void;
|
|
currentYear?: number;
|
|
monthList: Array<MonthItem>;
|
|
selectedDate?: string;
|
|
selectDateHandler: (item: MonthItem) => void;
|
|
}
|
|
|
|
export const Calendar: React.FC<CalendarProps> = ({
|
|
title,
|
|
nextYearHandler,
|
|
prevYearHandler,
|
|
currentYear,
|
|
monthList,
|
|
selectedDate,
|
|
selectDateHandler,
|
|
}) => {
|
|
return (
|
|
<div className="filter-box bg-pr-gray p-3 w-full">
|
|
<header className="flex flex-row border-b border-[#5F6284] pb-1.5 justify-center">
|
|
<span className="font-light">{title}</span>
|
|
<div className="flex flex-row items-center gap-3">
|
|
<ChevronRight
|
|
className="inline-block w-6 h-6 cursor-pointer"
|
|
onClick={nextYearHandler}
|
|
/>
|
|
<span className="font-light">{currentYear}</span>
|
|
<ChevronLeft
|
|
className="inline-block w-6 h-6 cursor-pointer"
|
|
onClick={prevYearHandler}
|
|
/>
|
|
</div>
|
|
</header>
|
|
<div className="content flex flex-col gap-2 text-center pt-1 cursor-pointer">
|
|
{monthList.map((item, index) => (
|
|
<span
|
|
key={`${item.id}-${index}`}
|
|
className={`text-lg hover:bg-[#33364D] p-1 rounded-xl transition-all duration-300 ${
|
|
selectedDate === item.label ? `bg-[#33364D]` : ""
|
|
}`}
|
|
onClick={() => selectDateHandler(item)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|