-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathLiveClock.jsx
More file actions
125 lines (113 loc) · 3.12 KB
/
LiveClock.jsx
File metadata and controls
125 lines (113 loc) · 3.12 KB
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, { useState, useEffect } from 'react';
// AnalogClock component to render a single clock
const AnalogClock = ({ time, title }) => {
const getHandRotations = (date) => {
const seconds = date.getSeconds();
const minutes = date.getMinutes();
const hours = date.getHours();
const secondsDeg = (seconds / 60) * 360;
const minutesDeg = (minutes / 60) * 360 + (seconds / 60) * 6;
const hoursDeg = (hours / 12) * 360 + (minutes / 60) * 30;
return { secondsDeg, minutesDeg, hoursDeg };
};
const { secondsDeg, minutesDeg, hoursDeg } = getHandRotations(time);
return (
<div className="flex flex-col items-center">
<h3 className="text-lg font-semibold mb-2">{title}</h3>
<svg width="200" height="200" viewBox="0 0 200 200">
{/* Clock face */}
<circle
cx="100"
cy="100"
r="98"
fill="#1F2937"
stroke="#9CA3AF"
strokeWidth="4"
/>
{/* Hour markers */}
{Array.from({ length: 12 }).map((_, i) => (
<line
key={i}
x1="100"
y1="10"
x2="100"
y2="20"
stroke="#9CA3AF"
strokeWidth="2"
transform={`rotate(${i * 30} 100 100)`}
/>
))}
{/* Hour Hand */}
<line
x1="100"
y1="100"
x2="100"
y2="50"
stroke="#FBBF24"
strokeWidth="6"
strokeLinecap="round"
style={{
transformOrigin: 'center',
transform: `rotate(${hoursDeg}deg)`,
}}
/>
{/* Minute Hand */}
<line
x1="100"
y1="100"
x2="100"
y2="30"
stroke="#A7F3D0"
strokeWidth="4"
strokeLinecap="round"
style={{
transformOrigin: 'center',
transform: `rotate(${minutesDeg}deg)`,
}}
/>
{/* Second Hand */}
<line
x1="100"
y1="100"
x2="100"
y2="20"
stroke="#F87171"
strokeWidth="2"
strokeLinecap="round"
style={{
transformOrigin: 'center',
transform: `rotate(${secondsDeg}deg)`,
}}
/>
{/* Center dot */}
<circle cx="100" cy="100" r="5" fill="#FBBF24" />
</svg>
</div>
);
};
// Main LiveClock component to manage time state
const LiveClock = () => {
const [now, setNow] = useState(new Date());
useEffect(() => {
const intervalId = setInterval(() => {
setNow(new Date());
}, 1000); // Update every second
return () => clearInterval(intervalId); // Cleanup interval on component unmount
}, []);
// Create a date object for UTC time
const utcDate = new Date(
now.getUTCFullYear(),
now.getUTCMonth(),
now.getUTCDate(),
now.getUTCHours(),
now.getUTCMinutes(),
now.getUTCSeconds(),
);
return (
<div className="flex justify-center gap-8 p-4">
<AnalogClock time={now} title="Local Time" />
<AnalogClock time={utcDate} title="UTC Time" />
</div>
);
};
export default LiveClock;