konnosDashboard
DiskManagementCoolDownSection.tsx86 lines · main
1import { AnimatePresence, motion } from 'framer-motion'
2import { useEffect, useState } from 'react'
3import { DialogSection } from 'ui'
4
5import CountdownTimerRadial from '@/components/ui/CountdownTimer/CountdownTimerRadial'
6
7export const DiskMangementCoolDownSection = ({ visible }: { visible: boolean }) => {
8 const [progress, setProgress] = useState(100)
9 const [showCountdown, setShowCountdown] = useState(false)
10 const [isJumping, setIsJumping] = useState(false)
11
12 useEffect(() => {
13 const startCountdown = () => {
14 setShowCountdown(true)
15 setProgress(100)
16 const interval = setInterval(() => {
17 setProgress((prevProgress) => {
18 if (prevProgress <= 0) {
19 clearInterval(interval)
20 setIsJumping(true)
21 setTimeout(() => {
22 setIsJumping(false)
23 setProgress(100)
24 startCountdown() // Restart the countdown
25 }, 300) // Duration of the jump animation
26 return 0
27 }
28 return prevProgress - 1
29 })
30 }, 100)
31
32 return () => clearInterval(interval)
33 }
34
35 const initialDelay = setTimeout(startCountdown, 1000)
36
37 return () => clearTimeout(initialDelay)
38 }, [])
39
40 return (
41 <AnimatePresence>
42 {visible && (
43 <motion.div
44 initial={{ opacity: 1, height: 'auto' }}
45 exit={{ opacity: 0, height: 0 }}
46 transition={{ duration: 0.15 }}
47 className="w-full"
48 >
49 <DialogSection className="bg-surface-100 text-sm text-foreground-light flex items-center gap-4 relative w-full border rounded-md">
50 <div className="w-12 h-12">
51 <AnimatePresence>
52 {showCountdown && (
53 <motion.div
54 key="countdown-timer"
55 initial={{ scale: 0.8, opacity: 0, y: -8 }}
56 animate={{
57 scale: isJumping ? 1.2 : 1,
58 opacity: 1,
59 y: isJumping ? -8 : 0,
60 }}
61 exit={{ scale: 0.8, opacity: 0, y: -8 }}
62 transition={{
63 duration: isJumping ? 0.3 : 0.8,
64 type: 'spring',
65 bounce: 0.6,
66 }}
67 >
68 <CountdownTimerRadial progress={progress} />
69 </motion.div>
70 )}
71 </AnimatePresence>
72 </div>
73 <div className="flex flex-col gap-0 grow">
74 <p className="text-sm text-foreground">
75 For 4 hours you will not be able to change any disk attributes.
76 </p>
77 <p className="text-sm text-foreground-light">
78 There is a cooldown period enforced for any disk attribute modifications
79 </p>
80 </div>
81 </DialogSection>
82 </motion.div>
83 )}
84 </AnimatePresence>
85 )
86}