wip: refactor

This commit is contained in:
2024-02-17 16:01:53 +07:00
parent f47eba5af7
commit 0f06522c28
18 changed files with 168 additions and 525 deletions

View File

@@ -1,25 +1,32 @@
import { LoaderIcon } from "@lume/icons";
import {
Outlet,
ScrollRestoration,
createRootRoute,
Outlet,
ScrollRestoration,
createRootRouteWithContext,
} from "@tanstack/react-router";
import { type Ark } from "@lume/ark";
import { type QueryClient } from "@tanstack/react-query";
export const Route = createRootRoute({
component: () => (
<>
<ScrollRestoration />
<Outlet />
</>
),
pendingComponent: Pending,
wrapInSuspense: true,
interface RouterContext {
ark: Ark;
queryClient: QueryClient;
}
export const Route = createRootRouteWithContext<RouterContext>()({
component: () => (
<>
<ScrollRestoration />
<Outlet />
</>
),
pendingComponent: Pending,
wrapInSuspense: true,
});
function Pending() {
return (
<div className="flex flex-col items-center justify-center w-screen h-screen">
<LoaderIcon className="size-5 animate-spin" />
</div>
);
return (
<div className="flex h-screen w-screen flex-col items-center justify-center">
<LoaderIcon className="size-5 animate-spin" />
</div>
);
}

View File

@@ -1,19 +1,19 @@
import { createFileRoute, redirect } from "@tanstack/react-router";
import { invoke } from "@tauri-apps/api/core";
export const Route = createFileRoute("/")({
beforeLoad: async ({ location }) => {
const signer = await invoke("verify_signer");
if (!signer) {
throw redirect({
to: "/landing",
search: {
redirect: location.href,
},
});
}
throw redirect({
to: "/app/space",
});
},
beforeLoad: async ({ location, context }) => {
const ark = context.ark;
const signer = await ark.verify_signer();
if (!signer) {
throw redirect({
to: "/landing",
search: {
redirect: location.href,
},
});
}
throw redirect({
to: "/app/space",
});
},
});

View File

@@ -3,57 +3,57 @@ import { Link, createFileRoute } from "@tanstack/react-router";
import { useTranslation } from "react-i18next";
export const Route = createFileRoute("/landing/")({
component: Screen,
component: Screen,
});
function Screen() {
const storage = useStorage();
const { t } = useTranslation();
const storage = useStorage();
const { t } = useTranslation();
return (
<div className="flex w-screen h-screen bg-black">
<div className="flex flex-col items-center justify-between w-full h-full">
<div />
<div className="flex flex-col items-center w-full max-w-4xl gap-10 mx-auto">
<div className="flex flex-col items-center text-center">
<img
src={`/heading-${storage.locale}.png`}
srcSet={`/heading-${storage.locale}@2x.png 2x`}
alt="lume"
className="w-2/3"
/>
<p className="mt-5 text-lg font-medium leading-snug whitespace-pre-line text-neutral-700">
{t("welcome.title")}
</p>
</div>
<div className="flex flex-col w-full max-w-sm gap-2 mx-auto">
<Link
to="/auth/create"
className="inline-flex items-center justify-center w-full text-lg font-medium text-white bg-blue-500 h-11 rounded-xl hover:bg-blue-600"
>
{t("welcome.signup")}
</Link>
<Link
to="/auth/import"
className="inline-flex items-center justify-center w-full text-lg font-medium text-white h-11 rounded-xl bg-neutral-950 hover:bg-neutral-900"
>
{t("welcome.login")}
</Link>
</div>
</div>
<div className="flex items-center justify-center h-11">
<p className="text-neutral-800">
{t("welcome.footer")}{" "}
<Link
to="https://nostr.com"
target="_blank"
className="text-blue-500"
>
here
</Link>
</p>
</div>
</div>
</div>
);
return (
<div className="flex h-screen w-screen bg-black">
<div className="flex h-full w-full flex-col items-center justify-between">
<div />
<div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-10">
<div className="flex flex-col items-center text-center">
<img
src={`/heading-${storage.locale}.png`}
srcSet={`/heading-${storage.locale}@2x.png 2x`}
alt="lume"
className="w-2/3"
/>
<p className="mt-5 whitespace-pre-line text-lg font-medium leading-snug text-neutral-700">
{t("welcome.title")}
</p>
</div>
<div className="mx-auto flex w-full max-w-sm flex-col gap-2">
<Link
to="/auth/create"
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
>
{t("welcome.signup")}
</Link>
<Link
to="/auth/import"
className="inline-flex h-11 w-full items-center justify-center rounded-xl bg-neutral-950 text-lg font-medium text-white hover:bg-neutral-900"
>
{t("welcome.login")}
</Link>
</div>
</div>
<div className="flex h-11 items-center justify-center">
<p className="text-neutral-800">
{t("welcome.footer")}{" "}
<Link
to="https://nostr.com"
target="_blank"
className="text-blue-500"
>
here
</Link>
</p>
</div>
</div>
</div>
);
}

View File

@@ -1,9 +0,0 @@
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/splash")({
component: Screen,
});
function Screen() {
return <div>Loading..</div>;
}