73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import {
|
|
Links,
|
|
LiveReload,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
} from "@remix-run/react";
|
|
import { useState } from "react";
|
|
|
|
import styles from "./styles/app.css";
|
|
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: styles }];
|
|
}
|
|
|
|
export const meta = () => ({
|
|
charset: "utf-8",
|
|
title: "Imageboard",
|
|
viewport: "width=device-width,initial-scale=1",
|
|
});
|
|
|
|
export default function App() {
|
|
const [darkMode, setDarkMode] = useState();
|
|
|
|
return (
|
|
<html className={`${darkMode ? "dark" : ""}`} lang="en">
|
|
<head>
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body className="dark:ctp-mocha dark:bg-ctp-base">
|
|
<button className="sticky top-0" onClick={() => setDarkMode(!darkMode)}>
|
|
{darkMode ? (
|
|
<svg
|
|
className="w-8 h-8 md:w-10 md:h-10"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="white"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
className="w-8 h-8 md:w-10 md:h-10"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="black"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
<Outlet />
|
|
<Scripts />
|
|
<LiveReload />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|