flo-bit.dev
your personal website on atproto - mirror
blento.app
stuff
+31
-8
src/lib/cards/ButtonCard/ButtonCard.svelte
+31
-8
src/lib/cards/ButtonCard/ButtonCard.svelte
···
1
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';
2
6
import type { ContentComponentProps } from '../types';
3
7
4
8
let { item }: ContentComponentProps = $props();
5
9
</script>
6
10
7
-
<a
8
-
href={item.cardData.href || '#'}
9
-
target="_blank"
10
-
rel="noopener noreferrer"
11
-
class="flex h-full w-full items-center justify-center p-4"
12
-
>
11
+
{#snippet content()}
13
12
<span
14
-
class="bg-accent-500 hover:bg-accent-600 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 text-center font-semibold shadow-md transition-colors"
13
+
class="text-base-950 dark:text-base-50 line-clamp-1 inline-flex items-center justify-center px-4 text-2xl font-semibold"
15
14
>
16
15
{item.cardData.text || 'Click me'}
17
16
</span>
18
-
</a>
17
+
{/snippet}
18
+
19
+
{#if item.cardData.href === '#login'}
20
+
<button
21
+
onclick={() => {
22
+
if (user.isLoggedIn && user.profile) {
23
+
goto('/' + getHandleOrDid(user.profile) + '/edit', {});
24
+
} else {
25
+
loginModalState.show();
26
+
}
27
+
}}
28
+
class="hover:bg-accent-100/20 flex h-full w-full cursor-pointer flex-col items-center justify-center transition-colors duration-100"
29
+
>
30
+
{@render content()}
31
+
</button>
32
+
{:else}
33
+
<a
34
+
href={item.cardData.href || '#'}
35
+
target="_blank"
36
+
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"
38
+
>
39
+
{@render content()}
40
+
</a>
41
+
{/if}
+3
-3
src/lib/cards/ButtonCard/ButtonCardSettings.svelte
+3
-3
src/lib/cards/ButtonCard/ButtonCardSettings.svelte
···
7
7
8
8
function confirmUrl() {
9
9
let href = item.cardData.href?.trim() || '';
10
-
if (href && !/^https?:\/\//i.test(href)) {
10
+
if (href && !/^https?:\/\//i.test(href) && !href.startsWith('#')) {
11
11
href = 'https://' + href;
12
12
}
13
13
item.cardData.href = href;
···
17
17
18
18
<div class="flex flex-col gap-3">
19
19
<div class="flex flex-col gap-1">
20
-
<Label for="button-href" class="text-sm">Link URL</Label>
20
+
<Label for="button-href" class="text-sm">Link</Label>
21
21
<Input
22
22
id="button-href"
23
23
bind:value={item.cardData.href}
24
24
placeholder="youtube.com"
25
-
class="text-sm"
25
+
class="text-sm mt-2"
26
26
onkeydown={(event) => {
27
27
if (event.code === 'Enter') {
28
28
event.preventDefault();
+7
-11
src/lib/cards/ButtonCard/EditingButtonCard.svelte
+7
-11
src/lib/cards/ButtonCard/EditingButtonCard.svelte
···
5
5
let { item = $bindable() }: ContentComponentProps = $props();
6
6
</script>
7
7
8
-
<div class="flex h-full w-full flex-col items-center justify-center gap-2 p-4">
9
-
<div
10
-
class="bg-accent-500 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 shadow-md"
11
-
>
12
-
<PlainTextEditor
13
-
key="text"
14
-
bind:contentDict={item.cardData}
15
-
placeholder="Button text"
16
-
class="text-center font-semibold"
17
-
/>
18
-
</div>
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
+
<PlainTextEditor
10
+
key="text"
11
+
bind:contentDict={item.cardData}
12
+
placeholder="Button text"
13
+
class="line-clamp-1 text-center text-2xl font-bold"
14
+
/>
19
15
</div>