import { useState, useEffect } from 'react'; import { themes } from '@dangerousthings/tokens'; import type { ThemeBrand, ThemeMode } from '@dangerousthings/tokens'; import { HexGridBackground } from '@dangerousthings/hex-background'; import type { HexGridBackgroundProps } from '@dangerousthings/hex-background'; import { HomePage } from './pages/HomePage'; import { BevelsPage } from './pages/BevelsPage'; import { FormsPage } from './pages/FormsPage'; import { AnimationsPage } from './pages/AnimationsPage'; import { CardsAdvancedPage } from './pages/CardsAdvancedPage'; import { TokensPage } from './pages/TokensPage'; import { HexBackgroundPage } from './pages/HexBackgroundPage'; const navPages = [ { hash: '', label: 'Home' }, { hash: 'bevels', label: 'Bevels' }, { hash: 'forms', label: 'Forms' }, { hash: 'animations', label: 'Animations' }, { hash: 'cards-advanced', label: 'Advanced Cards' }, { hash: 'hex-background', label: 'Hex Background' }, { hash: 'tokens', label: 'Tokens' }, ]; export function App() { const [brand, setBrand] = useState('dt'); const [theme, setTheme] = useState('dark'); const [currentHash, setCurrentHash] = useState(''); const [hexProps, setHexProps] = useState({}); // Sync brand/theme to so CSS custom properties cascade everywhere useEffect(() => { document.documentElement.setAttribute('data-brand', brand); document.documentElement.setAttribute('data-theme', theme); }, [brand, theme]); // Hash-based routing useEffect(() => { function onHashChange() { setCurrentHash(window.location.hash.replace('#/', '').replace('#', '')); } window.addEventListener('hashchange', onHashChange); onHashChange(); return () => window.removeEventListener('hashchange', onHashChange); }, []); function renderPage() { switch (currentHash) { case 'bevels': return ; case 'forms': return ; case 'animations': return ; case 'cards-advanced': return ; case 'hex-background': return ; case 'tokens': return ; default: return ; } } return ( <>
{renderPage()}
); }