ptr.pet
forked from
nekomimi.pet/wisp.place-monorepo
Monorepo for Wisp.place. A static site hosting service built on top of the AT Protocol.
1import type { PropsWithChildren } from 'react'
2import { useEffect } from 'react'
3
4import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
5import clsx from 'clsx'
6
7import '@public/styles/global.css'
8
9const client = new QueryClient()
10
11interface LayoutProps extends PropsWithChildren {
12 className?: string
13}
14
15export default function Layout({ children, className }: LayoutProps) {
16 useEffect(() => {
17 // Function to update dark mode based on system preference
18 const updateDarkMode = (e: MediaQueryList | MediaQueryListEvent) => {
19 if (e.matches) {
20 document.documentElement.classList.add('dark')
21 } else {
22 document.documentElement.classList.remove('dark')
23 }
24 }
25
26 // Create media query
27 const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
28
29 // Set initial value
30 updateDarkMode(darkModeQuery)
31
32 // Listen for changes
33 darkModeQuery.addEventListener('change', updateDarkMode)
34
35 // Cleanup
36 return () => darkModeQuery.removeEventListener('change', updateDarkMode)
37 }, [])
38
39 return (
40 <QueryClientProvider client={client}>
41 <div
42 className={clsx(
43 'flex flex-col items-center w-full min-h-screen',
44 className
45 )}
46 >
47 {children}
48 </div>
49 </QueryClientProvider>
50 )
51}