1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script lang="ts">
import CircleQuestionMark from "$icon/circle-question-mark";
import Avatar from "#lib/components/ui/Avatar.svelte";
import LayerCard from "#lib/components/ui/LayerCard.svelte";
import LayerCardPrimary from "#lib/components/ui/LayerCardPrimary.svelte";
interface Props {
handle: string;
}
let { handle }: Props = $props();
</script>
<LayerCard as="section" data-testid="profileNotJoined" class="relative text-foreground-default">
<div class="h-[calc(5.5625rem-var(--layer-gap)-1px)]"></div>
<LayerCardPrimary padding="none" class="static overflow-visible">
<div
class="absolute top-5.25 left-1/2 size-32 -translate-x-1/2 rounded-full bg-background-default sm:left-6 sm:translate-x-0"
>
<Avatar {handle} size="full" />
</div>
<div
class="sm:absolute sm:top-11.5 sm:right-4 sm:left-43 sm:flex sm:items-center sm:gap-md"
>
<h1
title={handle}
class="max-w-full truncate px-xl pt-30.75 typography-heading-4 sm:min-w-0 sm:flex-1 sm:px-none sm:pt-none"
>
{handle}
</h1>
</div>
<p
class="flex min-h-16 items-center gap-xs px-xl pt-sm pb-xl typography-paragraph-regular text-pretty text-foreground-muted sm:ml-39 sm:px-md sm:py-sm"
>
<CircleQuestionMark class="size-4 shrink-0" aria-hidden="true" />
This user doesn't exist.
</p>
</LayerCardPrimary>
</LayerCard>