your personal website on atproto - mirror
blento.app
Merge pull request #100 from flo-bit/button
Button
+26
-6
+15
-3
src/lib/cards/ButtonCard/ButtonCard.svelte
+15
-3
src/lib/cards/ButtonCard/ButtonCard.svelte
···
3
3
import { user } from '$lib/atproto';
4
4
import { getHandleOrDid } from '$lib/atproto/methods';
5
5
import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
6
+
import { cn } from '@foxui/core';
6
7
import type { ContentComponentProps } from '../types';
7
8
8
9
let { item }: ContentComponentProps = $props();
···
10
11
11
12
{#snippet content()}
12
13
<span
13
-
class="text-base-950 dark:text-base-50 line-clamp-1 inline-flex items-center justify-center px-4 text-2xl font-semibold"
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-500 dark:text-base-950 rounded-2xl px-5 py-2.5 text-xl'
18
+
: ''
19
+
)}
14
20
>
15
21
{item.cardData.text || 'Click me'}
16
22
</span>
···
25
31
loginModalState.show();
26
32
}
27
33
}}
28
-
class="hover:bg-accent-100/20 flex h-full w-full cursor-pointer flex-col items-center justify-center transition-colors duration-100"
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
+
]}
29
38
>
30
39
{@render content()}
31
40
</button>
···
34
43
href={item.cardData.href || '#'}
35
44
target="_blank"
36
45
rel="noopener noreferrer"
37
-
class="hover:bg-accent-100/20 flex h-full w-full flex-col items-center justify-center transition-colors duration-100"
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
+
]}
38
50
>
39
51
{@render content()}
40
52
</a>
+1
-1
src/lib/cards/ButtonCard/ButtonCardSettings.svelte
+1
-1
src/lib/cards/ButtonCard/ButtonCardSettings.svelte
+10
-2
src/lib/cards/ButtonCard/EditingButtonCard.svelte
+10
-2
src/lib/cards/ButtonCard/EditingButtonCard.svelte
···
1
1
<script lang="ts">
2
2
import type { ContentComponentProps } from '../types';
3
3
import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
4
+
import { cn } from '@foxui/core';
4
5
5
6
let { item = $bindable() }: ContentComponentProps = $props();
6
7
</script>
7
8
8
-
<div class="text-base-950 dark:text-base-50 flex h-full w-full flex-col items-center justify-center gap-2 px-4">
9
+
<div
10
+
class="text-base-950 dark:text-base-50 flex h-full w-full flex-col items-center justify-center gap-2 px-4"
11
+
>
9
12
<PlainTextEditor
10
13
key="text"
11
14
bind:contentDict={item.cardData}
12
15
placeholder="Button text"
13
-
class="line-clamp-1 text-center text-2xl font-bold"
16
+
class={cn(
17
+
'line-clamp-1 text-center text-2xl font-semibold',
18
+
item.color === 'transparent'
19
+
? 'bg-accent-500 dark:text-base-950 rounded-2xl px-5 py-2.5 text-xl'
20
+
: ''
21
+
)}
14
22
/>
15
23
</div>