import React, { useState, useEffect } from 'react';
const AnalogClock = () => {
const [time, setTime] = useState(new Date());
const [selectedTheme, setSelectedTheme] = useState('mint');
const themes = {
mint: {
bg: '#1B5E20',
face: '#C8E6C9',
border: '#81C784',
hands: '#2E7D32',
center: '#1B5E20',
text: '#1B5E20',
number: '#2E7D32'
},
lavender: {
bg: '#4A148C',
face: '#E1BEE7',
border: '#BA68C8',
hands: '#6A1B9A',
center: '#4A148C',
text: '#4A148C',
number: '#6A1B9A'
},
peach: {
bg: '#BF360C',
face: '#FFE0B2',
border: '#FFB74D',
hands: '#E65100',
center: '#BF360C',
text: '#BF360C',
number: '#E65100'
},
sky: {
bg: '#01579B',
face: '#BBDEFB',
border: '#64B5F6',
hands: '#0D47A1',
center: '#01579B',
text: '#01579B',
number: '#0D47A1'
},
rose: {
bg: '#880E4F',
face: '#F8BBD0',
border: '#F06292',
hands: '#AD1457',
center: '#880E4F',
text: '#880E4F',
number: '#AD1457'
},
neon_green: {
bg: '#0A0A0A',
face: '#1A1A1A',
border: '#39FF14',
hands: '#39FF14',
center: '#CCFF00',
text: '#39FF14',
number: '#39FF14',
glow: true
},
neon_pink: {
bg: '#0A0A0A',
face: '#1A1A1A',
border: '#FF10F0',
hands: '#FF10F0',
center: '#FF1493',
text: '#FF10F0',
number: '#FF10F0',
glow: true
},
neon_cyan: {
bg: '#0A0A0A',
face: '#1A1A1A',
border: '#00FFFF',
hands: '#00FFFF',
center: '#00CED1',
text: '#00FFFF',
number: '#00FFFF',
glow: true
}
};
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
const theme = themes[selectedTheme];
const seconds = time.getSeconds();
const minutes = time.getMinutes();
const hours = time.getHours() % 12;
const secondAngle = (seconds * 6);
const minuteAngle = (minutes * 6 + seconds * 0.1);
const hourAngle = (hours * 30 + minutes * 0.5);
const dateStr = time.toLocaleDateString('tr-TR', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
return (
{/* Sayılar */}
{[12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((num, i) => {
const angle = (i * 30) * Math.PI / 180;
const radius = 130;
const x = Math.sin(angle) * radius;
const y = -Math.cos(angle) * radius;
return (
{num}
);
})}
{/* Çizgiler */}
{[...Array(60)].map((_, i) => {
const angle = i * 6;
const isHour = i % 5 === 0;
const radius = 42;
return (
);
})}
{/* Akrep (saat) */}
{/* Yelkovan (dakika) */}
{/* Saniye */}
{/* Merkez nokta */}
{dateStr}
{Object.entries(themes).map(([key, val]) => (
))}
);
};
export default AnalogClock;
Hiç yorum yok:
Yorum Gönder