67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Calendar } from 'lucide-react';
|
|
|
|
interface CalendarDay {
|
|
date: string;
|
|
day: number;
|
|
month: string;
|
|
dayName: string;
|
|
}
|
|
|
|
interface DateSelectorProps {
|
|
selectedDate: string;
|
|
onDateChange: (date: string) => void;
|
|
}
|
|
|
|
const DateSelector: React.FC<DateSelectorProps> = ({
|
|
selectedDate,
|
|
onDateChange,
|
|
}) => {
|
|
const generateCalendarDays = (): CalendarDay[] => {
|
|
const today = new Date();
|
|
const days = [];
|
|
|
|
for (let i = 0; i < 14; i++) {
|
|
const date = new Date(today);
|
|
date.setDate(today.getDate() + i);
|
|
days.push({
|
|
date: date.toISOString().split('T')[0],
|
|
day: date.getDate(),
|
|
month: date.toLocaleDateString('en', { month: 'short' }),
|
|
dayName: date.toLocaleDateString('en', { weekday: 'short' })
|
|
});
|
|
}
|
|
return days;
|
|
};
|
|
|
|
const calendarDays = generateCalendarDays();
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl p-6 shadow-sm">
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<Calendar className="w-5 h-5" />
|
|
Choose Date
|
|
</h2>
|
|
<div className="grid grid-cols-7 gap-2 md:gap-3">
|
|
{calendarDays.map((day) => (
|
|
<button
|
|
key={day.date}
|
|
type="button"
|
|
onClick={() => onDateChange(day.date)}
|
|
className={`p-3 rounded-lg text-center transition-all ${
|
|
selectedDate === day.date
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-100 hover:bg-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
<div className="text-xs font-medium">{day.dayName}</div>
|
|
<div className="text-sm font-semibold">{day.day}</div>
|
|
<div className="text-xs">{day.month}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateSelector; |