'use client' import React, { useState } from 'react'; import { motion } from 'framer-motion'; export default function CircularProgressBar ({ size = 150, strokeWidth = 10, color = 'text-emerald-600' }) { const [progress, setProgress] = useState(20); const center = size / 2; const radius = center - strokeWidth / 2; const circumference = 2 * Math.PI * radius; const increaseProgress = () => { setProgress(prev => Math.min(prev + 10, 100)); }; const decreaseProgress = () => { setProgress(prev => Math.max(prev - 10, 0)); }; const shakeAnimation = { x: [0, -5, 5, -5, 5, -5, 5, -5, 5, 0], transition: { duration: 0.5, ease: 'easeInOut', repeat: Infinity } }; return ( <div className="flex flex-col items-center space-y-4"> <motion.svg width={size} height={size} className="transform -rotate-90" animate={progress > 90 ? shakeAnimation : {}} > <circle cx={center} cy={center} ={radius} fill="none" stroke="currentColor" strokeWidth={strokeWidth} className="text-secondary" /> <motion.circle cx={center} cy={center} ={radius} fill="none" stroke="currentColor" strokeWidth={strokeWidth} className={progress > 90 ? 'text-red-600' : color} strokeDasharray={circumference} strokeDashoffset={circumference * (1 - progress / 100)} strokeLinecap="round" initial={{ strokeDashoffset: circumference }} animate={{ strokeDashoffset: circumference * (1 - progress / 100) }} transition={{ duration: 0.5, ease: "easeInOut" }} /> </motion.svg> <div className="text-2xl font-bold">{progress}%</div> <div className="flex space-x-4"> <button onClick={decreaseProgress} className="text-sm border rounded-full px-4 py-2" > Decrease </button> <button onClick={increaseProgress} className="text-sm border rounded-full px-4 py-2" > Increase </button> </div> </div> ); };

Installation