flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import type { ContentComponentProps } from '$lib/cards/types';
3 import { getAdditionalUserData } from '$lib/website/context';
4 import type { AppBskyActorDefs } from '@atcute/bluesky';
5 import { Avatar } from '@foxui/core';
6
7 let { item }: ContentComponentProps = $props();
8
9 type ProfileWithUrl = AppBskyActorDefs.ProfileViewDetailed & { url?: string };
10
11 const data = getAdditionalUserData();
12 // svelte-ignore state_referenced_locally
13 const profiles = data[item.cardType] as ProfileWithUrl[];
14
15 function getLink(profile: ProfileWithUrl): string {
16 if (profile.url && !profile.url.startsWith('https://blento.app')) {
17 return profile.url;
18 } else if (profile.handle && profile.handle !== 'handle.invalid') {
19 return `/${profile.handle}`;
20 } else {
21 return `/${profile.did}`;
22 }
23 }
24</script>
25
26<div class="flex h-full flex-col">
27 <div class="flex max-w-full grow items-center gap-4 overflow-x-scroll overflow-y-hidden px-4">
28 {#each profiles as profile (profile.did)}
29 <a
30 href={getLink(profile)}
31 class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 accent:bg-accent-200/30 accent:hover:bg-accent-200/50 flex h-52 w-44 min-w-44 flex-col items-center justify-center gap-2 rounded-xl p-2 transition-colors duration-150"
32 target="_blank"
33 rel={profile.url ? 'nofollow noopener noreferrer' : undefined}
34 >
35 <Avatar src={profile.avatar} class="size-28" alt="" />
36 <div class="text-md line-clamp-1 max-w-full text-center font-bold">
37 {profile.displayName || profile.handle}
38 </div>
39 </a>
40 {/each}
41 </div>
42</div>