Customize Bootstrap Relays (#205)

* feat: add bootstrap relays file

* feat: add save bootstrap relays command

* feat: add customize bootstrap relays screen
This commit is contained in:
雨宮蓮
2024-06-10 10:48:39 +07:00
committed by GitHub
parent b396c8a695
commit 90342c552f
9 changed files with 902 additions and 448 deletions

View File

@@ -1,4 +1,4 @@
import { PlusIcon } from "@lume/icons";
import { PlusIcon, RelayIcon } from "@lume/icons";
import { Spinner } from "@lume/ui";
import { User } from "@/components/user";
import { checkForAppUpdates } from "@lume/utils";
@@ -59,46 +59,57 @@ function Screen() {
return (
<div
data-tauri-drag-region
className="relative flex h-full w-full items-center justify-center"
className="h-full w-full flex flex-col items-center justify-between"
>
<div className="relative z-20 flex flex-col items-center gap-16">
<div className="w-full flex-1 flex items-end justify-center px-4">
<div className="text-center">
<h2 className="text-xl text-neutral-700 dark:text-neutral-300">
<h2 className="mb-1 text-lg text-neutral-700 dark:text-neutral-300">
{currentDate}
</h2>
<h2 className="text-2xl font-semibold">Welcome back!</h2>
</div>
<div className="flex flex-wrap px-3 items-center justify-center gap-6">
{loading ? (
<div className="inline-flex size-6 items-center justify-center">
<Spinner className="size-6" />
</div>
) : (
<>
{context.accounts.map((account) => (
<button
key={account}
type="button"
onClick={() => select(account)}
>
<User.Provider pubkey={account}>
<User.Root className="flex h-36 w-32 flex-col items-center justify-center gap-3 rounded-2xl p-2 hover:bg-black/10 dark:hover:bg-white/10">
<User.Avatar className="size-20 rounded-full object-cover" />
<User.Name className="max-w-[6rem] truncate font-medium leading-tight" />
</User.Root>
</User.Provider>
</button>
))}
<Link to="/landing">
<div className="flex h-36 w-32 flex-col items-center justify-center gap-3 rounded-2xl p-2 hover:bg-black/10 dark:hover:bg-white/10">
<div className="flex size-20 items-center justify-center rounded-full bg-black/5 dark:bg-white/5">
<PlusIcon className="size-8" />
</div>
<p className="font-medium leading-tight">Add</p>
</div>
<div className="w-full flex-1 flex flex-wrap items-center justify-center gap-6 px-3">
{loading ? (
<div className="inline-flex size-6 items-center justify-center">
<Spinner className="size-6" />
</div>
) : (
<>
{context.accounts.map((account) => (
<button
key={account}
type="button"
onClick={() => select(account)}
>
<User.Provider pubkey={account}>
<User.Root className="flex h-36 w-32 flex-col items-center justify-center gap-3 rounded-2xl p-2 hover:bg-black/10 dark:hover:bg-white/10">
<User.Avatar className="size-20 rounded-full object-cover" />
<User.Name className="max-w-[6rem] truncate font-medium leading-tight" />
</User.Root>
</User.Provider>
</button>
))}
<Link to="/landing">
<div className="flex h-36 w-32 flex-col items-center justify-center gap-3 rounded-2xl p-2 hover:bg-black/10 dark:hover:bg-white/10">
<div className="flex size-20 items-center justify-center rounded-full bg-black/5 dark:bg-white/5">
<PlusIcon className="size-8" />
</div>
</Link>
</>
)}
<p className="font-medium leading-tight">Add</p>
</div>
</Link>
</>
)}
</div>
<div className="w-full flex-1 flex items-end justify-center pb-4 px-4">
<div>
<Link
to="/bootstrap-relays"
className="inline-flex items-center justify-center gap-2 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-full h-8 w-36 px-2 text-xs font-medium text-neutral-700 dark:text-white/40"
>
<RelayIcon className="size-4" />
Bootstrap Relays
</Link>
</div>
</div>
</div>