Widgets
Alarm clock
Alarms for times of day: switch each on or off, and snooze when it rings.
Installation
npx sinaui add alarm-clockCopy src/lib/ui/Widget.svelte, src/lib/ui/AlarmClock.svelte, chime.ts, now.svelte.ts and the components it uses: TimeField, Input, Switch, Dialog, Button and Icon.
Examples
Alarms
Add one for a minute from now to hear it. Alarms are remembered in this browser; they ring while the page is open.
<script lang="ts">
import AlarmClock, { type Alarm } from '#lib/ui/AlarmClock.svelte';
let alarms = $state<Alarm[]>([
{ id: 'fajr', time: '05:15', label: 'Fajr', on: true },
{ id: 'lecture', time: '09:00', label: 'Lecture at the Nizamiyya', on: false }
]);
</script>
<AlarmClock bind:alarms persist="sinaui-alarms" />Props
| Prop | Type | Default |
|---|---|---|
alarms | Alarm[], bindable | [] |
persist | string: a storage key | |
snooze | number: minutes | 5 |
locale | string | 'en' |
Accessibility
- When one rings, a dialog opens and the alarm is announced; Stop and Snooze are its buttons, and Escape stops it.
- Each switch is named for its alarm (“Fajr at 5:15 AM”), as is each delete button.
- “Next alarm in…” is read when it changes.