Spaces:
Running
Running
File size: 2,397 Bytes
bc139ec |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
'use client'
import React, { useState, useEffect } from 'react'
interface DynamicClockIconProps {
size?: number | string
className?: string
}
export function DynamicClockIcon({ size = '100%', className = '' }: DynamicClockIconProps) {
const [time, setTime] = useState<Date | null>(null)
useEffect(() => {
setTime(new Date())
const timer = setInterval(() => {
setTime(new Date())
}, 1000)
return () => clearInterval(timer)
}, [])
if (!time) return null
const seconds = time.getSeconds()
const minutes = time.getMinutes()
const hours = time.getHours()
const secondDegrees = (seconds / 60) * 360
const minuteDegrees = ((minutes + seconds / 60) / 60) * 360
const hourDegrees = ((hours + minutes / 60) / 12) * 360
return (
<div
className={`relative bg-black rounded-full border-2 border-gray-600 shadow-lg flex items-center justify-center ${className}`}
style={{ width: size, height: size }}
>
<div className="relative w-full h-full rounded-full bg-black">
{/* Hour Hand */}
<div
className="absolute top-1/2 left-1/2 w-1 bg-white rounded-full origin-bottom"
style={{
height: '25%',
transform: `translate(-50%, -100%) rotate(${hourDegrees}deg)`
}}
/>
{/* Minute Hand */}
<div
className="absolute top-1/2 left-1/2 w-0.5 bg-gray-300 rounded-full origin-bottom"
style={{
height: '35%',
transform: `translate(-50%, -100%) rotate(${minuteDegrees}deg)`
}}
/>
{/* Second Hand */}
<div
className="absolute top-1/2 left-1/2 w-0.5 bg-orange-500 rounded-full origin-bottom"
style={{
height: '40%',
transform: `translate(-50%, -100%) rotate(${secondDegrees}deg)`
}}
/>
{/* Center Dot */}
<div className="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-orange-500 rounded-full transform -translate-x-1/2 -translate-y-1/2" />
</div>
</div>
)
}
|