This commit is contained in:
Timothy Jaeryang Baek
2026-07-14 01:34:41 -04:00
parent a9617ca218
commit 34813573fa
34 changed files with 554 additions and 652 deletions
@@ -0,0 +1,34 @@
<script lang="ts">
import { getContext } from 'svelte';
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
const i18n = getContext('i18n');
export let href = '';
export let title = '';
export let description = '';
</script>
<div class="mt-6 px-2">
<div class="mb-0.5 text-[11px] font-normal text-gray-400 dark:text-gray-600">
{$i18n.t('Made by Open WebUI Community')}
</div>
<a
class="flex w-full cursor-pointer items-center justify-between gap-3 px-0 py-1 text-left transition"
{href}
target="_blank"
>
<div class="min-w-0">
<div class="line-clamp-1 text-[13px] font-normal text-gray-700 dark:text-gray-200">
{title}
</div>
<div class="line-clamp-1 text-xs text-gray-500 dark:text-gray-500">
{description}
</div>
</div>
<ChevronRight className="size-3.5 shrink-0 text-gray-400 dark:text-gray-600" />
</a>
</div>
@@ -10,6 +10,7 @@
export let value = '';
export let placeholder = $i18n.t('Tag');
export let align = 'start';
export let onChange: (value: string) => void = () => {};
export let items = [];
@@ -19,13 +20,14 @@
bind:value
{items}
{placeholder}
triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 rounded-xl "
itemClass="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl capitalize"
{align}
triggerClass="relative h-8 w-full flex items-center gap-0.5 px-1.5 py-1.5 bg-transparent rounded-xl text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
itemClass="flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[13px] capitalize hover:text-gray-900 dark:hover:text-gray-100"
onChange={() => onChange(value)}
>
<svelte:fragment slot="trigger" let:selectedLabel>
<div
class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden capitalize"
class="inline-flex h-input w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden capitalize"
>
{#if value}
{value}
@@ -9,6 +9,7 @@
export let value = '';
export let placeholder = $i18n.t('Select view');
export let align = 'start';
export let onChange: (value: string) => void = () => {};
const items = [
@@ -22,13 +23,14 @@
bind:value
{items}
{placeholder}
triggerClass="relative w-full flex items-center gap-0.5 px-2.5 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl "
labelClass="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
{align}
triggerClass="relative h-8 w-full flex items-center gap-0.5 px-1.5 py-1.5 bg-transparent rounded-xl text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
labelClass="inline-flex h-input w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
onChange={() => onChange(value)}
>
<svelte:fragment slot="trigger" let:selectedLabel>
<span
class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
class="inline-flex h-input w-full outline-hidden bg-transparent truncate placeholder-gray-400 focus:outline-hidden"
>
{selectedLabel}
</span>