Peter Meier
da57ad1ac8
- Changed margin class from `my-6` to `mb-6` in ContentRows.svelte for consistent spacing. - Updated PostCard.svelte to use `$derived` for post properties, enhancing reactivity. - Refined DeadlineBannerBlock.svelte by removing unnecessary border classes and improving layout for better content alignment. - Modified Button.svelte to support rendering children directly, enhancing flexibility. - Added `tabindex="0"` to TabBar.svelte for improved accessibility. - Fixed textarea closing tag in Textarea.svelte for proper HTML structure. - Corrected span closing tag in Toggle.svelte for valid markup.
30 lines
885 B
Svelte
30 lines
885 B
Svelte
<script lang="ts">
|
|
let {
|
|
checked = $bindable(false),
|
|
disabled = false,
|
|
label = '',
|
|
} = $props();
|
|
</script>
|
|
|
|
<label class="inline-flex cursor-pointer items-center gap-2 {disabled ? 'cursor-not-allowed opacity-60' : ''}">
|
|
<span
|
|
class="relative inline-block h-6 w-11 shrink-0 rounded-full transition-all duration-200 {checked ? 'bg-wald-500' : 'bg-stein-300'}"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="sr-only"
|
|
bind:checked
|
|
{disabled}
|
|
onkeydown={(e) => e.key === ' ' && (checked = !checked)}
|
|
/>
|
|
<span
|
|
class="absolute top-0.5 inline-block h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 {checked ? 'left-[22px] translate-x-0.5' : 'left-0.5'}"
|
|
></span>
|
|
</span>
|
|
{#if label}
|
|
<span class="text-base text-stein-700">{label}</span>
|
|
{/if}
|
|
</label>
|