Spaces:
Running
Running
| <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> | |
| <Collapsible bind:open={state} className="w-full space-y-1"> | |
| <div | |
| class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition" | |
| > | |
| <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 mb-1.5" | |
| 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> | |