40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { usePomodoro } from "../hooks/usePomodoro";
|
|
import { formatTime } from "../utils/time";
|
|
import "./PomodoroWidget.css";
|
|
|
|
interface PomodoroWidgetProps {
|
|
compact?: boolean;
|
|
}
|
|
|
|
export default function PomodoroWidget({ compact = false }: PomodoroWidgetProps) {
|
|
const { status } = usePomodoro();
|
|
|
|
if (!status) return null;
|
|
|
|
const isActive = status.status === "running" || status.status === "paused";
|
|
const displaySeconds = isActive ? status.remaining_seconds : status.duration_min * 60;
|
|
const progress = isActive
|
|
? ((status.duration_min * 60 - status.remaining_seconds) / (status.duration_min * 60)) * 100
|
|
: 0;
|
|
|
|
return (
|
|
<Link to="/pomodoro" className={`pomodoro-widget ${compact ? "compact" : ""}`}>
|
|
<div
|
|
className="pomodoro-widget-ring"
|
|
style={{ background: `conic-gradient(#4f7cff ${progress}%, #1f2633 0)` }}
|
|
>
|
|
<div className="pomodoro-widget-inner">
|
|
<span className="pomodoro-widget-time">{formatTime(displaySeconds)}</span>
|
|
<span className="pomodoro-widget-label">
|
|
{status.status === "idle" ? "помидоро" : status.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{!compact && status.task_note && (
|
|
<p className="pomodoro-widget-task">{status.task_note}</p>
|
|
)}
|
|
</Link>
|
|
);
|
|
}
|