\n \n

\n );\n};\n\nconst ErrorBoundary = ({ children }: { children: React.ReactNode }) => {\n const [hasError, setHasError] = useState(false);\n useEffect(() => {\n const errorHandler = (error: ErrorEvent) => {\n console.error('Error caught by error boundary:', error);\n setHasError(true);\n };\n window.addEventListener('error', errorHandler);\n return () => window.removeEventListener('error', errorHandler);\n }, []);\n if (hasError) {\n return

Something went wrong. Please try refreshing the page.

;\n }\n return children;\n};\n\nconst Logo = ({ isDarkMode }: { isDarkMode: boolean }) => {\n return (\n \n )\n}\n\nconst DashboardPage = () => {\n const { isDarkMode } = useTheme();\n\n return (\n \n

\n \n \n \n

\n \n \n

\n \n

\n \n );\n};\n\nconst DashboardContent = () => {\n const { sitename } = useParams();\n const { siteExists, setCurrentSite } = useAnalytics();\n\n useEffect(() => {\n if (sitename && siteExists(sitename)) {\n setCurrentSite(sitename);\n } else {\n setCurrentSite(null);\n }\n }, [sitename, siteExists, setCurrentSite]);\n\n return ;\n};\n\nconst ScrollToTop = ({ children }: { children: React.ReactNode }) => {\n const location = useLocation();\n useLayoutEffect(() => {\n window.scrollTo(0, 0);\n }, [location.pathname]);\n return children;\n}\n\n// Theme Context\ninterface ThemeContextType {\n isDarkMode: boolean;\n toggleDarkMode: () => void;\n}\n\nconst ThemeContext = createContext(undefined);\n\nconst applyTheme = (isDark: boolean) => {\n const root = document.documentElement;\n const body = document.body;\n\n if (isDark) {\n root.classList.add('dark');\n body.style.backgroundColor = '#111827';\n body.style.color = '#e2e8f0';\n } else {\n root.classList.remove('dark');\n body.style.backgroundColor = 'white';\n body.style.color = '#111827';\n }\n\n document.getElementById('theme-color')?.setAttribute('content', isDark ? '#111827' : '#FFFFFF');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n};\n\nexport const ThemeProvider = ({ children }: { children: React.ReactNode }) => {\n const [isDarkMode, setIsDarkMode] = useState(() => {\n if (typeof window !== 'undefined') {\n const savedTheme = localStorage.getItem('theme');\n return savedTheme === 'dark' || (savedTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches);\n }\n return false;\n });\n\n useEffect(() => {\n applyTheme(isDarkMode);\n }, [isDarkMode]);\n\n const toggleDarkMode = useCallback(() => {\n const newMode = !isDarkMode;\n applyTheme(newMode);\n setIsDarkMode(newMode);\n }, [isDarkMode]);\n\n return (\n \n {children}\n \n );\n};\n\nexport const useTheme = () => {\n const context = useContext(ThemeContext);\n if (context === undefined) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n\nconst DarkModeToggle = () => {\n const { isDarkMode, toggleDarkMode } = useTheme();\n\n return (\n

\n \n \n

\n \n

\n );\n};\n\nconst App = () => {\n const [isInitializing, setIsInitializing] = useState(true);\n const { isDarkMode } = useTheme();\n\n useEffect(() => {\n applyTheme(isDarkMode);\n setIsInitializing(false);\n }, []);\n\n if (isInitializing) {\n return ;\n }\n\n return (\n \n \n \n }>\n \n } />\n } />\n \n \n \n \n \n );\n};\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(\n \n \n \n);\n\nexport default LoadingSpinner;\n","deleted","label",[180,164],"frontend","permalink","https://www.val.town/x/stevekrouse/counterTownNico/code/frontend/index.tsx","extension","actionData","errors"]