Spaces:
Running
Running
File size: 2,552 Bytes
de2d4cd 13c9aca de2d4cd 13c9aca de2d4cd 13c9aca de2d4cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script lang="ts">
import Icon from '@iconify/svelte';
import type { Model } from "$lib/utils/type";
let open = false;
export let items: Model[];
export let value: string;
export let onChange: (value: string) => void;
$: selectedModel = items.find(({ id }) => id === value)
const handleSelect = (id: string) => {
onChange(id)
open = false;
}
const handleOpen = () => open = !open
</script>
<div class="w-full flex flex-col gap-2.5">
<label
for="model"
class="font-sans text-slate-400 font-regular text-sm"
>
Model:
</label>
<div
id="model"
class={`cursor-pointer shadow-inner font-code border hover:bg-slate-900/90 hover:border-slate-700/80 text-white rounded-lg text-sm w-full transition-all duration-200 leading-relaxed outline-none relative ${open ? 'bg-slate-900/90 border-slate-700/80' : 'border-slate-800 bg-slate-900/60'}`}
>
<button class="w-full flex justify-between items-center px-4 py-3" role="searchbox" on:click={handleOpen}>
{#if selectedModel}
<div class="flex items-center justify-start gap-3">
<img
src={selectedModel.logo}
alt={selectedModel.id}
width={22}
height={22}
class="rounded-full"
/>
<p>{selectedModel?.label ?? selectedModel?.id}</p>
{#if selectedModel?.label}
<p class="text-slate-400 text-xs">({selectedModel?.id})</p>
{/if}
</div>
{:else}
<p class="opacity-70">Select a model</p>
{/if}
<Icon icon="iconamoon:arrow-right-2-light" class={`text-slate-400 w-5 h-5 transition-all duration-150 ${open && 'transform rotate-90'}`} />
</button>
<div
class="absolute bottom-0 left-0 w-full pt-4 translate-y-full transition-all duration-150"
class:pointer-events-none={!open}
class:opacity-0={!open}
>
<div class="bg-slate-900 border border-slate-700/80 text-white p-2 font-code rounded-lg">
{#each items as { id, logo, label }}
<button
class={`w-full flex items-center justify-start gap-3 p-2 cursor-pointer hover:bg-slate-800/60 rounded-lg ${selectedModel?.id === id && 'bg-slate-800/60'}`}
on:click={() => handleSelect(id)}
>
<img
src={logo}
alt={id}
width={22}
height={22}
class="rounded-full"
/>
<p>{label ?? id}</p>
</button>
{/each}
</div>
</div>
</div>
</div> |