92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { Calendar } from 'lucide-react'
|
|
|
|
interface CalendarEvent {
|
|
id: string
|
|
title: string
|
|
time: string
|
|
type: 'default' | 'maintenance'
|
|
}
|
|
|
|
interface WeeklyCalendarProps {
|
|
events?: Record<string, CalendarEvent[]>
|
|
}
|
|
|
|
const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
|
|
|
|
function getWeekDays(): { label: string; date: Date; dateStr: string; isToday: boolean }[] {
|
|
const now = new Date()
|
|
const day = now.getDay()
|
|
const mondayOffset = day === 0 ? 6 : day - 1
|
|
const monday = new Date(now)
|
|
monday.setDate(now.getDate() - mondayOffset)
|
|
|
|
return DAY_NAMES.map((label, i) => {
|
|
const d = new Date(monday)
|
|
d.setDate(monday.getDate() + i)
|
|
const dateStr = d.toISOString().split('T')[0]
|
|
const isToday = d.toDateString() === now.toDateString()
|
|
return { label, date: d, dateStr, isToday }
|
|
})
|
|
}
|
|
|
|
export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
|
|
const days = useMemo(() => getWeekDays(), [])
|
|
|
|
return (
|
|
<div className="glass-card-static flex flex-col h-full">
|
|
<div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
|
|
<Calendar size={16} className="text-muted-foreground" />
|
|
<h3 className="font-heading text-sm font-bold text-foreground">This Week</h3>
|
|
</div>
|
|
<div className="flex flex-1 min-h-0">
|
|
{days.map((day, i) => {
|
|
const dayEvents = events[day.dateStr] || []
|
|
return (
|
|
<div
|
|
key={day.dateStr}
|
|
className="flex-1 flex flex-col min-h-0"
|
|
style={{
|
|
borderRight: i < 4 ? '1px solid var(--glass-border)' : undefined,
|
|
}}
|
|
>
|
|
<div
|
|
className="px-2 py-2 text-center"
|
|
style={{
|
|
borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)',
|
|
}}
|
|
>
|
|
<span className={`font-label text-[0.625rem] uppercase tracking-[0.1em] ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}>
|
|
{day.label}
|
|
</span>
|
|
<div className={`text-sm font-heading font-bold ${day.isToday ? 'text-foreground' : 'text-muted-foreground'}`}>
|
|
{day.date.getDate()}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-1.5 space-y-1">
|
|
{dayEvents.length === 0 ? (
|
|
<p className="text-[0.625rem] text-[hsl(var(--text-dimmed))] text-center py-2">No events</p>
|
|
) : (
|
|
dayEvents.map(event => (
|
|
<div
|
|
key={event.id}
|
|
className="rounded-md px-2 py-1.5 text-[0.6875rem] cursor-pointer hover:bg-accent/30 transition-colors"
|
|
style={{
|
|
borderLeft: `3px solid ${event.type === 'maintenance' ? '#fbbf24' : '#06b6d4'}`,
|
|
background: 'rgba(255, 255, 255, 0.02)',
|
|
}}
|
|
>
|
|
<div className="font-medium text-foreground truncate">{event.title}</div>
|
|
<div className="font-label text-[0.5625rem] text-muted-foreground">{event.time}</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|