Files
SixFlagsSuperCalendar/components/EmptyState.tsx
josh e48038c399
Some checks failed
Build and Deploy / Build & Push (push) Failing after 22s
feat: UI redesign with park detail pages and ride status
Visual overhaul:
- Warmer color system with amber accent for Today, better text hierarchy
- Row hover highlighting, sticky column shadow on horizontal scroll
- Closed cells replaced with dot (·) instead of "Closed" text
- Regional grouping (Northeast/Southeast/Midwest/Texas & South/West)
- Two-row header with park count badge and WeekNav on separate lines
- Amber "Today" button in WeekNav when off current week
- Mobile card layout (< 1024px) with 7-day grid per park; table on desktop
- Skeleton loading state via app/loading.tsx

Park detail pages (/park/[id]):
- Month calendar view with ← → navigation via ?month= param
- Live ride status fetched from Six Flags API (cached 1h)
- Ride hours only shown when they differ from park operating hours
- Fallback to nearest upcoming open day when today is dropped by API,
  including cross-month fallback for end-of-month edge case

Data layer:
- Park type gains region field; parks.ts exports groupByRegion()
- db.ts gains getParkMonthData() for single-park month queries
- sixflags.ts gains scrapeRidesForDay() returning RidesFetchResult
  with rides, dataDate, isExact, and parkHoursLabel

Removed: CalendarGrid.tsx, MonthNav.tsx (dead code)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-04 11:53:06 -04:00

31 lines
917 B
TypeScript

export function EmptyState() {
return (
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: "80px 24px",
gap: 12,
color: "var(--color-text-muted)",
}}>
<div style={{ fontSize: "2rem" }}>📅</div>
<div style={{ fontSize: "1rem", fontWeight: 600, color: "var(--color-text)" }}>No data scraped yet</div>
<div style={{ fontSize: "0.85rem", textAlign: "center", lineHeight: 1.6 }}>
Run the following to populate the calendar:
</div>
<pre style={{
background: "var(--color-surface)",
border: "1px solid var(--color-border)",
borderRadius: 8,
padding: "12px 20px",
fontSize: "0.8rem",
color: "var(--color-text)",
lineHeight: 1.8,
}}>
npm run discover{"\n"}npm run scrape
</pre>
</div>
);
}