Components
Loading preview...
Countdown Timer
npx shadcn@latest add https://21st.dev/r/anubra266/countdown-timer"use client";
import { Timer } from "@ark-ui/react/timer";
import { Coffee, Pause, Play, RotateCcw } from "lucide-react";
export default function TimerPomodoro() {
return (
<div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex flex-col items-center">
<Timer.Root
countdown
startMs={25 * 60 * 1000}
className="w-full max-w-sm"
>
<div className="bg-red-50 dark:bg-red-950 border-2 border-red-200 dark:border-red-800 rounded-xl p-6">
<div className="flex items-center justify-center gap-2 mb-4">
<div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
<Coffee className="w-4 h-4 text-white" />
</div>
<h3 className="font-semibold text-gray-900 dark:text-gray-100">
Focus Time
</h3>
</div>
<Timer.Area className="text-center mb-6">
<div className="inline-flex text-4xl font-bold font-mono text-red-600 dark:text-red-400">
<Timer.Item type="minutes" className="min-w-[2ch] text-center" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" className="min-w-[2ch] text-center" />
</div>
<div className="text-sm text-gray-600 dark:text-gray-400 mt-2">
25 minutes of focused work
</div>
</Timer.Area>
<Timer.Control className="flex justify-center gap-2">
<Timer.ActionTrigger
action="start"
className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors text-sm font-medium"
>
<Play className="w-4 h-4" />
Start
</Timer.ActionTrigger>
<Timer.ActionTrigger
action="pause"
className="p-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
>
<Pause className="w-4 h-4" />
</Timer.ActionTrigger>
<Timer.ActionTrigger
action="reset"
className="p-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
>
<RotateCcw className="w-4 h-4" />
</Timer.ActionTrigger>
</Timer.Control>
</div>
</Timer.Root>
</div>
);
}