flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
1.4 kB
50 lines
1<script lang="ts">
2 import type { ProfileViewDetailed } from '@atproto/api/dist/client/types/app/bsky/actor/defs';
3 import Avatar from './Avatar.svelte';
4 import { cn } from '$lib/utils';
5
6 let { profile }: { profile: ProfileViewDetailed } = $props();
7</script>
8
9{#if profile}
10 <div class="mx-auto max-w-full sm:max-w-2xl sm:py-6">
11 <div>
12 {#if profile.banner}
13 <img
14 class="aspect-[3/1] w-full border-b border-base-800 object-cover sm:rounded-xl sm:border"
15 src={profile.banner}
16 alt=""
17 />
18 {:else}
19 <div class="aspect-[8/1] w-full"></div>
20 {/if}
21 </div>
22 <div
23 class={cn(
24 profile.banner ? '-mt-11' : '-mt-8',
25 'flex max-w-full items-end space-x-5 px-4 sm:-mt-16 sm:px-6 lg:px-8'
26 )}
27 >
28 <Avatar src={profile.avatar} size="size-24 sm:size-32" />
29 <div
30 class="flex min-w-0 flex-1 flex-row sm:flex-row sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
31 >
32 <div
33 class={cn(
34 profile.banner ? 'mt-4 sm:mt-0' : '-mt-[4.5rem] sm:-mt-[6.5rem]',
35 'flex min-w-0 max-w-full flex-1 flex-col items-baseline'
36 )}
37 >
38 <h1
39 class="max-w-full truncate text-lg font-bold text-base-900 dark:text-base-100 sm:text-xl"
40 >
41 {profile.displayName || profile.handle}
42 </h1>
43 <div class="truncate text-xs text-base-900 dark:text-base-400 sm:text-sm">
44 @{profile.handle}
45 </div>
46 </div>
47 </div>
48 </div>
49 </div>
50{/if}