your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { goto } from '$app/navigation';
3 import { user, login, logout } from '$lib/atproto';
4 import { getHandleOrDid } from '$lib/atproto/methods';
5 import type { WebsiteData } from '$lib/types';
6 import type { ActorIdentifier } from '@atcute/lexicons';
7 import { Avatar, Button, Popover } from '@foxui/core';
8
9 let {
10 data
11 }: {
12 data: WebsiteData;
13 } = $props();
14
15 let settingsPopoverOpen = $state(false);
16</script>
17
18{#if user.isLoggedIn && user.profile}
19 <div class="fixed top-4 right-4 z-20">
20 <Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
21 {#snippet child({ props })}
22 <button {...props}>
23 <Avatar src={user.profile?.avatar} alt="" class="size-15 rounded-full" />
24 </button>
25 {/snippet}
26
27 <div class="flex flex-col">
28 {#if user.profile}
29 <Button
30 variant="ghost"
31 onclick={() => {
32 goto('/' + getHandleOrDid(user.profile), {});
33 }}>Leave edit mode</Button
34 >
35 {/if}
36
37 <Button variant="ghost" onclick={logout}>Logout</Button>
38 </div>
39 </Popover>
40 </div>
41{/if}