diff --git a/src/app/calendar/layout.tsx b/src/app/calendar/layout.tsx new file mode 100644 index 0000000..eae1ff1 --- /dev/null +++ b/src/app/calendar/layout.tsx @@ -0,0 +1,14 @@ +import { Header } from '@/components/Header' + +export default function CalendarLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + <> +
+ {children} + + ) +} diff --git a/src/app/context/layout.tsx b/src/app/context/layout.tsx new file mode 100644 index 0000000..1e71cd0 --- /dev/null +++ b/src/app/context/layout.tsx @@ -0,0 +1,14 @@ +import { Header } from '@/components/Header' + +export default function ContextLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + <> +
+ {children} + + ) +} diff --git a/src/app/demo/layout.tsx b/src/app/demo/layout.tsx new file mode 100644 index 0000000..b06c589 --- /dev/null +++ b/src/app/demo/layout.tsx @@ -0,0 +1,14 @@ +import { Header } from '@/components/Header' + +export default function DemoLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + <> +
+ {children} + + ) +} diff --git a/src/app/demo/page.tsx b/src/app/demo/page.tsx new file mode 100644 index 0000000..28aab26 --- /dev/null +++ b/src/app/demo/page.tsx @@ -0,0 +1,170 @@ +'use client' + +import { useState, useEffect, useCallback } from 'react' +import { Calendar as CalendarIcon, MapPin, Clock, ZoomIn, ZoomOut, Link2, Unlink2 } from 'lucide-react' +import { TemporalZoomController } from '@/components/calendar' +import { CalendarHeader } from '@/components/calendar/CalendarHeader' +import { CalendarSidebar } from '@/components/calendar/CalendarSidebar' +import { TabLayout } from '@/components/ui/TabLayout' +import { TemporalTab } from '@/components/tabs/TemporalTab' +import { SpatialTab } from '@/components/tabs/SpatialTab' +import { LunarTab } from '@/components/tabs/LunarTab' +import { ContextTab } from '@/components/tabs/ContextTab' +import { useCalendarStore, useEffectiveSpatialGranularity } from '@/lib/store' +import { TemporalGranularity, TEMPORAL_GRANULARITY_LABELS, GRANULARITY_LABELS } from '@/lib/types' +import type { TabView } from '@/lib/types' + +export default function DemoPage() { + const [sidebarOpen, setSidebarOpen] = useState(true) + const [zoomPanelOpen, setZoomPanelOpen] = useState(false) + const { + temporalGranularity, + activeTab, + setActiveTab, + zoomCoupled, + toggleZoomCoupled, + zoomIn, + zoomOut, + } = useCalendarStore() + const effectiveSpatial = useEffectiveSpatialGranularity() + + // Keyboard shortcuts + const handleKeyDown = useCallback( + (e: KeyboardEvent) => { + if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return + if (e.ctrlKey || e.metaKey || e.altKey) return + + switch (e.key) { + case 'l': + case 'L': + e.preventDefault() + toggleZoomCoupled() + break + // Tab switching: 1-4 + case '1': + e.preventDefault() + setActiveTab('temporal') + break + case '2': + e.preventDefault() + setActiveTab('spatial') + break + case '3': + e.preventDefault() + setActiveTab('lunar') + break + case '4': + e.preventDefault() + setActiveTab('context') + break + } + }, + [toggleZoomCoupled, setActiveTab] + ) + + useEffect(() => { + window.addEventListener('keydown', handleKeyDown) + return () => window.removeEventListener('keydown', handleKeyDown) + }, [handleKeyDown]) + + return ( +
+ {/* Sidebar */} + {sidebarOpen && ( + setSidebarOpen(false)} /> + )} + + {/* Main content */} +
+ setSidebarOpen(!sidebarOpen)} + sidebarOpen={sidebarOpen} + /> + + {/* Main area with optional zoom panel */} +
+ {/* Tab layout */} +
+ + {{ + temporal: , + spatial: , + lunar: , + context: , + }} + +
+ + {/* Zoom control panel (collapsible) */} + {zoomPanelOpen && ( + + )} +
+ + {/* Footer with calendar info and quick zoom controls */} +
+
+
+ + + Gregorian + + + + {TEMPORAL_GRANULARITY_LABELS[temporalGranularity]} + + + + {GRANULARITY_LABELS[effectiveSpatial]} + + {activeTab === 'spatial' && ( + + )} +
+ + {/* Quick controls */} +
+ + + +
+
+
+
+
+ ) +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 266ce5b..206d43e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,7 +2,6 @@ import type { Metadata } from 'next' import { Inter, JetBrains_Mono } from 'next/font/google' import './globals.css' import { Providers } from '@/providers' -import { Header } from '@/components/Header' const inter = Inter({ subsets: ['latin'], variable: '--font-inter' }) const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' }) @@ -25,9 +24,8 @@ export default function RootLayout({