your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { goto } from '$app/navigation';
3 import { user } from '$lib/atproto';
4 import { getHandleOrDid } from '$lib/atproto/methods';
5 import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
6 import { cn } from '@foxui/core';
7 import type { ContentComponentProps } from '../types';
8
9 let { item }: ContentComponentProps = $props();
10</script>
11
12{#snippet content()}
13 <span
14 class={cn(
15 'text-base-950 dark:text-base-50 line-clamp-1 inline-flex items-center justify-center px-4 text-2xl font-semibold',
16 item.color === 'transparent'
17 ? 'bg-accent-400 dark:bg-accent-500 hover:bg-accent-400 dark:text-base-950 rounded-2xl px-5 py-2.5 text-xl transition-colors duration-100'
18 : ''
19 )}
20 >
21 {item.cardData.text || 'Click me'}
22 </span>
23{/snippet}
24
25{#if item.cardData.href === '#login'}
26 <button
27 onclick={() => {
28 if (user.isLoggedIn && user.profile) {
29 goto('/' + getHandleOrDid(user.profile) + '/edit', {});
30 } else {
31 loginModalState.show();
32 }
33 }}
34 class={[
35 'flex h-full w-full cursor-pointer flex-col items-center justify-center transition-colors duration-100',
36 item.color === 'transparent' ? 'hover:bg-transparent' : 'hover:bg-accent-100/20'
37 ]}
38 >
39 {@render content()}
40 </button>
41{:else}
42 <a
43 href={item.cardData.href || '#'}
44 target="_blank"
45 rel="noopener noreferrer"
46 class={[
47 'flex h-full w-full flex-col items-center justify-center transition-colors duration-100',
48 item.color === 'transparent' ? 'hover:bg-transparent' : 'hover:bg-accent-100/20'
49 ]}
50 >
51 {@render content()}
52 </a>
53{/if}