87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
interface DaySchedule {
|
|
day: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
|
|
open?: string;
|
|
close?: string;
|
|
closed?: boolean;
|
|
}
|
|
|
|
interface ScheduleCardProps {
|
|
schedules: DaySchedule[];
|
|
onSuggestEdit?: () => void;
|
|
}
|
|
|
|
const DAYS: DaySchedule['day'][] = [
|
|
'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
|
|
];
|
|
|
|
function getCurrentDay(): DaySchedule['day'] {
|
|
return DAYS[new Date().getDay()];
|
|
}
|
|
|
|
function isOpenNow(schedules: DaySchedule[]): boolean {
|
|
const today = getCurrentDay();
|
|
const todaySchedule = schedules.find((s) => s.day === today);
|
|
if (!todaySchedule || todaySchedule.closed || !todaySchedule.open || !todaySchedule.close) return false;
|
|
|
|
const now = new Date();
|
|
const [openHour, openMin] = todaySchedule.open.replace(/[^0-9.]/g, '').split('.').map(Number);
|
|
const [closeHour, closeMin] = todaySchedule.close.replace(/[^0-9.]/g, '').split('.').map(Number);
|
|
const openIsPm = todaySchedule.open.toUpperCase().includes('PM');
|
|
const closeIsPm = todaySchedule.close.toUpperCase().includes('PM');
|
|
|
|
const openTotal = (openIsPm && openHour !== 12 ? openHour + 12 : openHour) * 60 + (openMin || 0);
|
|
const closeTotal = (closeIsPm && closeHour !== 12 ? closeHour + 12 : closeHour) * 60 + (closeMin || 0);
|
|
const nowTotal = now.getHours() * 60 + now.getMinutes();
|
|
|
|
return nowTotal >= openTotal && nowTotal < closeTotal;
|
|
}
|
|
|
|
export function ScheduleCard({ schedules, onSuggestEdit }: ScheduleCardProps) {
|
|
const today = getCurrentDay();
|
|
|
|
return (
|
|
<div className="bg-black/[0.27] rounded-xl mt-2 px-4 py-4 w-full">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold">Hours</h3>
|
|
</div>
|
|
<button
|
|
onClick={onSuggestEdit}
|
|
className="text-sm underline underline-offset-2 hover:text-white transition-colors text-tertiary mt-1"
|
|
>
|
|
Suggest an edit
|
|
</button>
|
|
</div>
|
|
|
|
{/* <hr className="border-[#38444d] mb-4 mt-2" /> */}
|
|
|
|
{schedules.length === 0 ? (
|
|
<p className="text-sm text-tertiary italic">No data yet</p>
|
|
) : (
|
|
<div className="flex flex-col gap-1">
|
|
{DAYS.map((day) => {
|
|
const schedule = schedules.find((s) => s.day === day);
|
|
const isToday = day === today;
|
|
|
|
return (
|
|
<div
|
|
key={day}
|
|
className={`flex items-center justify-between text-sm ${isToday ? 'font-bold text-white' : 'text-tertiary'}`}
|
|
>
|
|
<span>{day}</span>
|
|
<span>
|
|
{!schedule || schedule.closed
|
|
? 'Closed'
|
|
: `${schedule.open} - ${schedule.close}`}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ScheduleCard;
|