import { createSignal, createMemo, For, Show } from 'solid-js'
// Timer component to showcase Solid's fine-grained reactivity
function Timer() {
const [time, setTime] = createSignal(0)
const [running, setRunning] = createSignal(false)
let interval
const formattedTime = createMemo(() => {
const t = time()
const mins = Math.floor(t / 60)
const secs = t % 60
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
})
const toggle = () => {
if (running()) {
clearInterval(interval)
setRunning(false)
} else {
interval = setInterval(() => setTime(t => t + 1), 1000)
setRunning(true)
}
}
const reset = () => {
clearInterval(interval)
setRunning(false)
setTime(0)
}
return (
<div class="p-6 rounded-xl bg-zinc-800/50 border border-zinc-700/50 mb-6">
<div class="text-center">
<p class="text-4xl font-bold font-mono mb-4">{formattedTime()}</p>
<div class="flex justify-center gap-3">
<button
onClick={toggle}
class={`px-4 py-2 rounded-xl font-medium transition-colors ${
running() ? 'bg-amber-500 hover:bg-amber-600' : 'bg-sky-500 hover:bg-sky-600'
}`}
>
{running() ? 'Pause' : 'Start'}
</button>
<button