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