flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import type { SettingsComponentProps } from '../../types';
4 import { Button, Label } from '@foxui/core';
5 import GiphySearchModal from './GiphySearchModal.svelte';
6
7 let { item = $bindable<Item>() }: SettingsComponentProps = $props();
8
9 let isSearchOpen = $state(false);
10
11 function handleGifSelect(gif: {
12 id: string;
13 title: string;
14 images: { original: { mp4: string } };
15 }) {
16 item.cardData.url = gif.images.original.mp4;
17 item.cardData.alt = gif.title;
18 isSearchOpen = false;
19 }
20</script>
21
22<div class="flex flex-col gap-2">
23 <Button variant="secondary" class="w-full justify-start" onclick={() => (isSearchOpen = true)}>
24 <svg
25 xmlns="http://www.w3.org/2000/svg"
26 fill="none"
27 viewBox="0 0 24 24"
28 stroke-width="1.5"
29 stroke="currentColor"
30 class="mr-2 size-4"
31 >
32 <path
33 stroke-linecap="round"
34 stroke-linejoin="round"
35 d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
36 />
37 </svg>
38 Change GIF
39 </Button>
40</div>
41
42<GiphySearchModal
43 bind:open={isSearchOpen}
44 onselect={handleGifSelect}
45 oncancel={() => (isSearchOpen = false)}
46/>