{/* Header Row */}

{(days || []).map(d => (

{d}

))}

{/* Grid Body */}

{/* Time Labels */}

{(hours || []).map((h, i) => (

{h}:00

))}

{/* Grid Lines Background */}

{(hours || []).map((_, i) => (

0 ? `1px solid ${COLORS.gridLine}` : 'none', boxSizing: 'border-box' }} /> ))} {/* Vertical Lines */}

{[0,1,2,3,4].map(i => (

))}

{/* Class Blocks */} {(units || []).map((unit) => { const dayCol = getDayIndex(unit.day) + 2; // +2 because col 1 is time const startRow = unit.start - 7; // Starts at 8am = row 1 const isClash = checkClash(unit, units); return (

setViewingUnit(unit)} style={{ gridColumn: dayCol, gridRow: `${startRow} / span ${unit.dur}`, margin: 2, padding: 4, borderRadius: 6, backgroundColor: isClash ? COLORS.clash : unit.color, color: 'white', fontSize: 11, fontWeight: '600', overflow: 'hidden', cursor: 'pointer', zIndex: 10, boxShadow: '0 2px 4px rgba(0,0,0,0.15)', animation: 'popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', border: isClash ? '2px solid white' : 'none' }} >

{unit.code}

{unit.loc.split(' ')[0]}

{isMultiplayer && unit.ownerId !== user.id && (

)}

); })}

); }; // ──────────────────────────────────────────────────────────────────────── // 4. MAIN RENDER // ──────────────────────────────────────────────────────────────────────── return (

{/* Header */}

USYD Timetable

Sem 2, 2024 • {(units || []).length} Classes

{isMultiplayer && (

{(members || []).slice(0, 3).map((m, i) => (

0 ? -10 : 0 }} /> ))}

)}

{/* Main Grid Area */}

{renderGrid()}

{/* Floating Action Button */}

{/* ADD UNIT MODAL (Bottom Sheet) */} {isAddModalOpen && (

{/* Backdrop */}

setIsAddModalOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)' }} /> {/* Sheet Content */}

Add Unit

🔍 setSearchQuery(e.target.value)} style={{ width: '100%', height: 50, borderRadius: 12, background: '#F5F5F7', border: 'none', padding: '0 16px 0 44px', fontSize: 16, boxSizing: 'border-box' }} />

{(searchQuery || []).length < 2 ? (

🎓

Type a unit code to see suggestions.

) : (

{(suggestions || []).length > 0 ? (suggestions || []).map(unit => (

addUnit(unit)} style={{ padding: 16, borderRadius: 12, background: '#F9F9F9', border: '1px solid #EEE', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }} >

{unit.code}

{unit.name}

{unit.day} • {unit.start}:00 • {unit.loc}

➕

)) : (

No units found for "{searchQuery}"

)}

)} {/* CLASS DETAIL MODAL */} {viewingUnit && (

setViewingUnit(null)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)' }} />

{viewingUnit.code}

{viewingUnit.name}

Time

{viewingUnit.day} {viewingUnit.start}:00

Duration

{viewingUnit.dur} Hours

📍

{viewingUnit.loc}

Camperdown Campus

👨‍🏫

{viewingUnit.lec}

Unit Coordinator

{isMultiplayer && viewingUnit.ownerId !== user.id && (

Added by {viewingUnit.ownerName}

)}

{(!isMultiplayer || viewingUnit.ownerId === user.id) && ( )}

)}

); }