You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.2 KiB
101 lines
3.2 KiB
<script lang='ts'> |
|
import CopyToClipboard from "$components/util/CopyToClipboard.svelte"; |
|
import { logout, ndkInstance } from '$lib/ndk'; |
|
import { ArrowRightToBracketOutline, UserOutline, FileSearchOutline } from "flowbite-svelte-icons"; |
|
import { Avatar, Popover } from "flowbite-svelte"; |
|
import type { NDKUserProfile } from "@nostr-dev-kit/ndk"; |
|
|
|
const externalProfileDestination = 'https://njump.me/' |
|
|
|
let { pubkey, isNav = false } = $props(); |
|
|
|
let profile = $state<NDKUserProfile | null>(null); |
|
let pfp = $derived(profile?.image); |
|
let username = $derived(profile?.name); |
|
let tag = $derived(profile?.name); |
|
let npub = $state<string | undefined >(undefined); |
|
|
|
$effect(() => { |
|
const user = $ndkInstance |
|
.getUser({ pubkey: pubkey ?? undefined }); |
|
|
|
npub = user.npub; |
|
|
|
user.fetchProfile() |
|
.then(userProfile => { |
|
profile = userProfile; |
|
}); |
|
}); |
|
|
|
async function handleSignOutClick() { |
|
logout($ndkInstance.activeUser!); |
|
profile = null; |
|
} |
|
|
|
function shortenNpub(long: string|undefined) { |
|
if (!long) return ''; |
|
return long.slice(0, 8) + '…' + long.slice(-4); |
|
} |
|
</script> |
|
|
|
<div class="relative"> |
|
{#if profile} |
|
<div class="group"> |
|
<Avatar |
|
rounded |
|
class='h-6 w-6 cursor-pointer' |
|
src={pfp} |
|
alt={username} |
|
/> |
|
{#key username || tag} |
|
<Popover |
|
target="avatar" |
|
class='popover-leather w-[180px]' |
|
trigger='hover' |
|
> |
|
<div class='flex flex-row justify-between space-x-4'> |
|
<div class='flex flex-col'> |
|
{#if username} |
|
<h3 class='text-lg font-bold'>{username}</h3> |
|
{#if isNav}<h4 class='text-base'>@{tag}</h4>{/if} |
|
{/if} |
|
<ul class="space-y-2 mt-2"> |
|
<li> |
|
<CopyToClipboard displayText={shortenNpub(npub)} copyText={npub} /> |
|
</li> |
|
<li> |
|
<a class='hover:text-primary-400 dark:hover:text-primary-500 text-nowrap mt-3 m-0' href='{externalProfileDestination}{npub}' target='_blank'> |
|
<UserOutline class='mr-1 !h-6 !w-6 inline !fill-none dark:!fill-none' /><span class='underline'>View profile</span> |
|
</a> |
|
</li> |
|
{#if isNav} |
|
<li> |
|
<a |
|
href="" |
|
id='sign-out-button' |
|
class='btn-leather text-nowrap mt-3 flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500' |
|
onclick={handleSignOutClick} |
|
role="button" |
|
> |
|
<ArrowRightToBracketOutline class='mr-1 !h-6 !w-6 inline !fill-none dark:!fill-none' /> Sign out |
|
</a> |
|
</li> |
|
{:else} |
|
<!-- li> |
|
<a |
|
href="" |
|
class='btn-leather text-nowrap mt-3 flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500' |
|
role="button" |
|
> |
|
<FileSearchOutline class='mr-1 !h-6 inline !fill-none dark:!fill-none' /> More content |
|
</a> |
|
</li --> |
|
{/if} |
|
</ul> |
|
</div> |
|
</div> |
|
</Popover> |
|
{/key} |
|
</div> |
|
{/if} |
|
</div>
|
|
|