39 lines
1.6 KiB
React
39 lines
1.6 KiB
React
|
import ShiftSlot from './ShiftSlot'
|
|||
|
|
|
|||
|
|
const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
|||
|
|
|
|||
|
|
export default function DayColumn({ date, isToday, activeShifts = new Set(), shifts = {}, showShift2 = false }) {
|
|||
|
|
const dayName = DAY_NAMES[date.getDay()]
|
|||
|
|
const dayNum = date.getDate()
|
|||
|
|
const isWeekend = date.getDay() === 0 || date.getDay() === 6
|
|||
|
|
const hasActive = activeShifts.size > 0
|
|||
|
|
|
|||
|
|
// Shift 2 is visible if: weekend, holiday (showShift2), or daytime testing on
|
|||
|
|
const shift2Visible = isWeekend || showShift2
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col min-w-0 flex-1 rounded-lg border border-gray-700 bg-gray-800/40">
|
|||
|
|
{/* Day header — subtle today ring, no full-column highlight */}
|
|||
|
|
<div
|
|||
|
|
className={`text-center py-1.5 rounded-t-lg ${
|
|||
|
|
isToday ? 'bg-gray-600 text-white' : 'bg-gray-700/60 text-gray-300'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide leading-none">
|
|||
|
|
{dayName}
|
|||
|
|
</p>
|
|||
|
|
<p className={`text-base font-bold leading-tight ${isToday ? 'text-white' : 'text-gray-100'}`}>
|
|||
|
|
{dayNum}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Shifts */}
|
|||
|
|
<div className="flex flex-col flex-1 px-0.5 py-1">
|
|||
|
|
<ShiftSlot label="12AM–9AM" tests={shifts.shift1} visible={true} active={activeShifts.has(1)} />
|
|||
|
|
<ShiftSlot label="9AM–5PM" tests={shifts.shift2} visible={true} active={activeShifts.has(2)} />
|
|||
|
|
<ShiftSlot label="5PM–12AM" tests={shifts.shift3} visible={true} active={activeShifts.has(3)} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|