WebSearchResults.svelte

<script lang="ts">
	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 '$lib/components/common/Collapsible.svelte';


	export let status = { urls: [], query: '' };
	let state = false;
</script>

<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 />

			{#if state}
				<ChevronUp strokeWidth="3.5" className="size-3.5 " />
			{:else}
				<ChevronDown strokeWidth="3.5" className="size-3.5 " />
			{/if}
		</div>
		<div
			class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
			slot="content"
		>
			{#if status?.query}
				<a
					href="https://www.google.com/search?q={status.query}"
					target="_blank"
					class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
				>
					<div class="flex gap-2 items-center">
						<MagnifyingGlass />
		
						<div class=" line-clamp-1">
							{status.query}
						</div>
					</div>
		
					<div
						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
					>
						<!--  -->
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 16 16"
							fill="currentColor"
							class="size-4"
						>
							<path
								fill-rule="evenodd"
								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
				</a>
			{/if}
		
			{#each status.urls as url, urlIdx}
				<a
					href={url}
					target="_blank"
					class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
						? ''
						: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
				>
					<div class=" line-clamp-1">
						{url}
					</div>
		
					<div
						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
					>
						<!--  -->
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 16 16"
							fill="currentColor"
							class="size-4"
						>
							<path
								fill-rule="evenodd"
								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
				</a>
			{/each}
		</div>
	</Collapsible>	
</div>