refactor: Update WebSearchResults.svelte to use new CollapsibleComponent

This commit is contained in:
rdavis 2024-07-04 13:55:37 +00:00
parent d20601dc47
commit 2389c36a70

View File

@ -2,17 +2,18 @@
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
import { Collapsible } from 'bits-ui';
import { slide } from 'svelte/transition';
import Collapsible from '$lib/components/common/Collapsible.svelte';
export let status = { urls: [], query: '' };
let state = false;
</script>
<Collapsible.Root class="w-full space-y-1" bind:open={state}>
<Collapsible.Trigger>
<div class="w-full space-y-1">
<Collapsible bind:open={state}>
<div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
slot="head"
>
<slot />
@ -22,11 +23,9 @@
<ChevronDown strokeWidth="3.5" className="size-3.5 " />
{/if}
</div>
</Collapsible.Trigger>
<Collapsible.Content
class=" text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
transition={slide}
<div
class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
slot="content"
>
{#if status?.query}
<a
@ -93,5 +92,6 @@
</div>
</a>
{/each}
</Collapsible.Content>
</Collapsible.Root>
</div>
</Collapsible>
</div>