your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { user, login, logout } from '$lib/atproto';
3 import type { WebsiteData } from '$lib/types';
4 import type { ActorIdentifier } from '@atcute/lexicons';
5 import { Button, Popover } from '@foxui/core';
6
7 let {
8 data
9 }: {
10 data: WebsiteData;
11 } = $props();
12
13 let settingsPopoverOpen = $state(false);
14</script>
15
16{#if user.isLoggedIn && user.profile}
17 <div class="fixed top-4 right-4 z-20">
18 <Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
19 {#snippet child({ props })}
20 <button {...props}>
21 <img src={user.profile?.avatar} alt="" class="size-15 rounded-full" />
22 </button>
23 {/snippet}
24
25 <Button variant="ghost" onclick={logout}>Logout</Button>
26 </Popover>
27 </div>
28{:else if !user.isInitializing}
29 <div
30 class="dark:bg-base-950 border-base-200 dark:border-base-900 fixed top-4 right-4 z-20 flex flex-col gap-4 rounded-2xl border bg-white p-4 shadow-lg"
31 >
32 <span class="text-sm font-semibold">Login to edit your page</span>
33
34 <Button
35 onclick={async () => {
36 await login(data.handle as ActorIdentifier);
37 }}>Login</Button
38 >
39 </div>
40{/if}