alexei.dolgolyov
477c0e4d52
- Add svelte-i18n with 224 translation keys (English + Russian) - Language switcher in header (EN/RU toggle, persists to localStorage) - Extract all hardcoded strings from 37 component/page files - Add 4 new widget types: Bookmark, Note (markdown), Embed (iframe), Status - WidgetRenderer dispatches by type, WidgetGrid supports full-width widgets - Type-specific config forms in board editor - Install marked for markdown rendering
68 lines
2.1 KiB
Svelte
68 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { t } from 'svelte-i18n';
|
|
|
|
interface Props {
|
|
iconType: string;
|
|
iconValue: string;
|
|
onchange?: (type: string, value: string) => void;
|
|
}
|
|
|
|
let { iconType = $bindable('lucide'), iconValue = $bindable(''), onchange }: Props = $props();
|
|
|
|
function handleTypeChange(e: Event) {
|
|
const target = e.target as HTMLSelectElement;
|
|
iconType = target.value;
|
|
iconValue = '';
|
|
onchange?.(iconType, iconValue);
|
|
}
|
|
|
|
function handleValueChange(e: Event) {
|
|
const target = e.target as HTMLInputElement;
|
|
iconValue = target.value;
|
|
onchange?.(iconType, iconValue);
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-2">
|
|
<label class="block text-sm font-medium text-card-foreground">{$t('app.icon')}</label>
|
|
|
|
<div class="flex gap-2">
|
|
<select
|
|
value={iconType}
|
|
onchange={handleTypeChange}
|
|
class="rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
<option value="lucide">{$t('app.icon_lucide')}</option>
|
|
<option value="simple">{$t('app.icon_simple')}</option>
|
|
<option value="url">{$t('app.icon_url')}</option>
|
|
<option value="emoji">{$t('app.icon_emoji')}</option>
|
|
</select>
|
|
|
|
<input
|
|
type="text"
|
|
value={iconValue}
|
|
oninput={handleValueChange}
|
|
placeholder={iconType === 'lucide'
|
|
? $t('app.icon_lucide_placeholder')
|
|
: iconType === 'simple'
|
|
? $t('app.icon_simple_placeholder')
|
|
: iconType === 'url'
|
|
? $t('app.icon_url_placeholder')
|
|
: $t('app.icon_emoji_placeholder')}
|
|
class="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</div>
|
|
|
|
{#if iconType === 'emoji' && iconValue}
|
|
<div class="text-2xl">{iconValue}</div>
|
|
{:else if iconType === 'url' && iconValue}
|
|
<img src={iconValue} alt={$t('app.icon_preview')} class="h-8 w-8 rounded object-contain" />
|
|
{:else if iconType === 'simple' && iconValue}
|
|
<img
|
|
src="https://cdn.simpleicons.org/{iconValue.toLowerCase()}"
|
|
alt="{iconValue} icon"
|
|
class="h-8 w-8"
|
|
/>
|
|
{/if}
|
|
</div>
|