This commit is contained in:
Timothy Jaeryang Baek 2025-08-07 01:19:34 +04:00
parent 6598812a25
commit 73c92e2e3e
2 changed files with 49 additions and 37 deletions

View file

@ -460,25 +460,27 @@
<div class="grid lg:grid-cols-2 flex-col gap-1.5"> <div class="grid lg:grid-cols-2 flex-col gap-1.5">
{#each promptSuggestions as prompt, promptIdx} {#each promptSuggestions as prompt, promptIdx}
<div <div
class=" flex border border-gray-100 dark:border-none dark:bg-gray-850 rounded-xl py-1.5" class=" flex border rounded-xl border-gray-50 dark:border-none dark:bg-gray-850 py-1.5"
> >
<div class="flex flex-col flex-1 pl-1"> <div class="flex flex-col flex-1 pl-1">
<div class="flex border-b border-gray-100 dark:border-gray-850 w-full"> <div class="py-1 gap-1">
<input <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850" class="px-3 text-sm font-medium w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')} placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
bind:value={prompt.title[0]} bind:value={prompt.title[0]}
/> />
<input <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850" class="px-3 text-xs w-full bg-transparent outline-hidden text-gray-600 dark:text-gray-400"
placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')} placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
bind:value={prompt.title[1]} bind:value={prompt.title[1]}
/> />
</div> </div>
<hr class="border-gray-50 dark:border-gray-850 my-1" />
<textarea <textarea
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850 resize-none" class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden resize-none"
placeholder={$i18n.t( placeholder={$i18n.t(
'Prompt (e.g. Tell me a fun fact about the Roman Empire)' 'Prompt (e.g. Tell me a fun fact about the Roman Empire)'
)} )}
@ -487,8 +489,9 @@
/> />
</div> </div>
<div class="">
<button <button
class="px-3" class="p-3"
type="button" type="button"
on:click={() => { on:click={() => {
promptSuggestions.splice(promptIdx, 1); promptSuggestions.splice(promptIdx, 1);
@ -507,6 +510,7 @@
</svg> </svg>
</button> </button>
</div> </div>
</div>
{/each} {/each}
</div> </div>

View file

@ -1,15 +1,22 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher, tick } from 'svelte'; import { createEventDispatcher, tick, getContext } from 'svelte';
import { Switch } from 'bits-ui'; import { Switch } from 'bits-ui';
import { settings } from '$lib/stores'; import { settings } from '$lib/stores';
import Tooltip from './Tooltip.svelte';
export let state = true; export let state = true;
export let id = ''; export let id = '';
export let tooltip = false;
const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
$: dispatch('change', state); $: dispatch('change', state);
</script> </script>
<Tooltip
content={tooltip ? (state ? $i18n.t('Enabled') : $i18n.t('Disabled')) : ''}
placement="top"
>
<Switch.Root <Switch.Root
bind:checked={state} bind:checked={state}
{id} {id}
@ -24,3 +31,4 @@
class="pointer-events-none block size-4 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini " class="pointer-events-none block size-4 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini "
/> />
</Switch.Root> </Switch.Root>
</Tooltip>