\n \n

\n );\n};\n\nexport default LoadingSpinner;\n\nconst ErrorBoundary = ({ children }) => {\n const [hasError, setHasError] = useState(false);\n useEffect(() => {\n const errorHandler = (error) => {\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 }) => {\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\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 }) => {\n const location = useLocation();\n useLayoutEffect(() => {\n window.scrollTo(0, 0);\n }, [location.pathname]);\n return children;\n}\n\nconst ThemeContext = createContext();\n\nconst applyTheme = (isDark) => {\n const root = document.documentElement;\n const body = document.body;\n\n if (isDark) {\n root.classList.add('dark');\n body.style.backgroundColor = '#111827'; // dark grey\n body.style.color = '#e2e8f0'; // light grey\n } else {\n root.classList.remove('dark');\n body.style.backgroundColor = 'white';\n body.style.color = '#111827'; // dark grey\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 }) => {\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); // Apply theme immediately\n setIsDarkMode(newMode); // Update React state\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 {isDarkMode ? 'Dark' : 'Light'}\n */}\n \n

\n );\n};\n\nconst App = () => {\n const [isInitializing, setIsInitializing] = useState(true);\n const { isDarkMode } = useTheme();\n\n useEffect(() => {\n // Apply theme immediately\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 = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);","deleted","label",[100],"permalink","https://www.val.town/x/iamseeley/counterTownClient/code/main.tsx","extension","actionData","errors"]