81 lines
3.0 KiB
JavaScript
81 lines
3.0 KiB
JavaScript
import {
|
|
Links,
|
|
LiveReload,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
useLoaderData,
|
|
} from "@remix-run/react";
|
|
import { useState } from "react";
|
|
import {
|
|
AuthenticityTokenProvider,
|
|
createAuthenticityToken,
|
|
} from "remix-utils";
|
|
import styles from "./styles/app.css";
|
|
import { json } from "@remix-run/node";
|
|
import { getSession, commitSession } from "./sessions";
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: styles }];
|
|
}
|
|
|
|
export const meta = () => ({
|
|
charset: "utf-8",
|
|
title: "New Remix App",
|
|
viewport: "width=device-width,initial-scale=1",
|
|
});
|
|
|
|
export async function loader({ request }) {
|
|
let session = await getSession(request.headers.get("cookie"));
|
|
let token = createAuthenticityToken(session);
|
|
return json(
|
|
{ csrf: token },
|
|
{ headers: { "Set-Cookie": await commitSession(session) } }
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
let { csrf } = useLoaderData();
|
|
const [dark, setDark] = useState(true);
|
|
|
|
return (
|
|
<html className={`${dark ? "ctp-frappe" : "ctp-latte"}`} lang="en">
|
|
<head>
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body className="bg-ctp-base text-ctp-text">
|
|
<button onClick={() => setDark(!dark)} className="fixed bottom-0 m-2">
|
|
{dark ? (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
fill="white"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
fill="black"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
<AuthenticityTokenProvider token={csrf}>
|
|
<Outlet />
|
|
</AuthenticityTokenProvider>
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
<LiveReload />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|