103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
import { cn } from "@/commons";
|
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
|
|
export const Route = createLazyFileRoute("/new")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { platform } = Route.useRouteContext();
|
|
|
|
return (
|
|
<div
|
|
data-tauri-drag-region
|
|
className={cn(
|
|
"relative size-full flex items-center justify-center",
|
|
platform === "windows"
|
|
? "bg-neutral-200 dark:bg-neutral-900"
|
|
: "bg-white/20 dark:bg-black/20",
|
|
)}
|
|
>
|
|
<div className="w-[350px] flex flex-col gap-8">
|
|
<div className="flex flex-col gap-1 text-center">
|
|
<h1 className="leading-tight text-lg font-semibold">
|
|
How would you like to use Lume?
|
|
</h1>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<a
|
|
href="/new-account/connect"
|
|
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-600 ring-1 ring-black/5 dark:ring-white/5"
|
|
>
|
|
<h3 className="mb-1 font-medium">Continue with Nostr Connect</h3>
|
|
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
|
Your account will be handled by a remote signer. Lume will not
|
|
store your account keys.
|
|
</p>
|
|
</a>
|
|
<a
|
|
href="/new-account/import"
|
|
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-600 ring-1 ring-black/5 dark:ring-white/5"
|
|
>
|
|
<h3 className="mb-1 font-medium">Continue with Secret Key</h3>
|
|
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
|
Lume will store your keys in secure storage. You can provide a
|
|
password to add extra security.
|
|
</p>
|
|
</a>
|
|
<a
|
|
href="/new-account/watch"
|
|
className="w-full p-4 rounded-xl hover:shadow-lg hover:ring-0 hover:bg-white dark:hover:bg-neutral-600 ring-1 ring-black/5 dark:ring-white/5"
|
|
>
|
|
<h3 className="mb-1 font-medium">
|
|
Continue with Public Key (Watch Mode)
|
|
</h3>
|
|
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
|
Use for experience without provide your private key, you can add
|
|
it later to publish new note.
|
|
</p>
|
|
</a>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="flex-1 h-px bg-black/5 dark:bg-white/5" />
|
|
<div className="shrink-0 text-sm text-neutral-500 dark:text-neutral-400">
|
|
Do you not have a Nostr account yet?
|
|
</div>
|
|
<div className="flex-1 h-px bg-black/5 dark:bg-white/5" />
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<a
|
|
href="https://nsec.app"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-sm bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg flex items-center gap-1.5 h-9 px-1"
|
|
>
|
|
<div className="size-7 rounded-md bg-black inline-flex items-center justify-center">
|
|
<img src="/nsec_app.svg" alt="nsec.app" className="size-5" />
|
|
</div>
|
|
Create one with nsec.app
|
|
</a>
|
|
<a
|
|
href="https://nosta.me"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-sm bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg flex items-center gap-1.5 h-9 px-1"
|
|
>
|
|
<div className="size-7 rounded-md bg-black overflow-hidden">
|
|
<img
|
|
src="/nosta.jpg"
|
|
alt="nosta"
|
|
className="size-7 object-cover"
|
|
/>
|
|
</div>
|
|
Create one with nosta.me
|
|
</a>
|
|
<p className="text-xs text-neutral-400 dark:text-neutral-600">
|
|
Or you can create account from other Nostr clients.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|