mirror of
https://github.com/CarGDev/pomodoro.git
synced 2025-09-18 17:38:28 +00:00
3b577288da
- Upgrade React to v19.1.1 and update all related packages - Add comprehensive keyboard shortcuts (Space, R, S, Ctrl+D) with visual indicators - Implement Zustand global state management for shortcuts and app state - Fix .env file loading with dotenv package and proper Vite configuration - Add text wrapping to all card components to prevent overflow - Improve theme toggle visibility and styling in sidebar - Update button layouts to use flex-direction: row - Add hover effects and consistent styling across components - Fix infinite loop issues in keyboard shortcuts hook - Update Vite config to properly handle .env files and source directories - Add proper TypeScript configuration for React 19 JSX transform
54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
interface ProgressRingProps {
|
|
progress: number; // 0-1
|
|
size?: number;
|
|
strokeWidth?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function ProgressRing({
|
|
progress,
|
|
size = 256,
|
|
strokeWidth = 8,
|
|
className = ""
|
|
}: ProgressRingProps) {
|
|
const radius = (size - strokeWidth) / 2;
|
|
const circumference = radius * 2 * Math.PI;
|
|
const strokeDasharray = circumference;
|
|
const strokeDashoffset = circumference * (1 - progress);
|
|
|
|
return (
|
|
<svg
|
|
className={`transform -rotate-90 ${className}`}
|
|
width={size}
|
|
height={size}
|
|
viewBox={`0 0 ${size} ${size}`}
|
|
data-testid="progress-ring"
|
|
>
|
|
{/* Background Circle */}
|
|
<circle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
stroke="currentColor"
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
className="text-muted opacity-20"
|
|
/>
|
|
|
|
{/* Progress Circle */}
|
|
<circle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
stroke="currentColor"
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
className="text-accent timer-ring"
|
|
strokeDasharray={strokeDasharray}
|
|
strokeDashoffset={strokeDashoffset}
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|