metacubexd/src/App.tsx
2024-04-16 17:52:44 +08:00

54 lines
1.2 KiB
TypeScript

import { usePrefersDark } from '@solid-primitives/media'
import type { ParentComponent } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { Header } from '~/components'
import {
WsMsg,
autoSwitchTheme,
curTheme,
endpoint,
favDayTheme,
favNightTheme,
setCurTheme,
setLatestConnectionMsg,
useTwemoji,
useWsRequest,
} from '~/signals'
const ProtectedResources = () => {
const latestConnectionMsg = useWsRequest<WsMsg>('connections')
createEffect(() => setLatestConnectionMsg(latestConnectionMsg()))
return null
}
export const App: ParentComponent = ({ children }) => {
const prefersDark = usePrefersDark()
createEffect(() => {
if (autoSwitchTheme())
setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
})
return (
<div
class={twMerge(
'relative flex h-screen flex-col overscroll-y-none subpixel-antialiased',
useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
)}
data-theme={curTheme()}
>
<Header />
<div class="flex-1 overflow-y-auto p-2 sm:p-4">
<div class="pb-8">{children}</div>
</div>
<Show when={endpoint()}>
<ProtectedResources />
</Show>
</div>
)
}