reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finish settings screen

Browse Source
This commit is contained in:
reya
2024-04-16 15:28:38 +07:00
parent 2eb2010d43
commit 413d8d82df
13 changed files with 461 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop2/src/routes/settings/backup.tsx
+28 -22
View File
@@ -30,15 +30,12 @@ function Screen() {
const accounts = Route.useLoaderData();
return (
<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
{accounts.map((account, index) => (
<div key={account.npub} className="flex items-start gap-6 py-3">
<div className="w-36 shrink-0 text-end font-medium">
Account {index}
</div>
<div className="mx-auto w-full max-w-xl">
<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
{accounts.map((account) => (
<Account account={account} />
</div>
))}
))}
</div>
</div>
);
}
@@ -66,7 +63,7 @@ function Account({ account }: { account: Account }) {
};
return (
<div className="flex flex-1 flex-col gap-2">
<div className="flex flex-1 flex-col gap-2 py-3">
<User.Provider pubkey={account.npub}>
<User.Root className="flex items-center gap-2">
<User.Avatar className="size-8 rounded-full object-cover" />
@@ -77,20 +74,29 @@ function Account({ account }: { account: Account }) {
</User.Root>
</User.Provider>
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<input
readOnly
type="text"
value={displayNsec(key, 36)}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
<button
type="button"
onClick={copyKey}
className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
<div className="flex w-full flex-col gap-1">
<label
htmlFor="nsec"
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
>
{copied ? "Copied" : "Copy"}
</button>
Private Key
</label>
<div className="flex items-center gap-2">
<input
readOnly
name="nsec"
type="text"
value={displayNsec(key, 36)}
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
/>
<button
type="button"
onClick={copyKey}
className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
>
{copied ? "Copied" : "Copy"}
</button>
</div>
</div>
<div className="flex w-full flex-col gap-1">
<label