Initial commit, repo migration

components/CClock/Clock.js

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import { Number } from './Number'
+import { Word } from './Word'
+
+const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
+
+export const Clock = ({ h24 = true }) => {
+	const [hour, setHour] = useState(0)
+	const [minute, setMinute] = useState(0)
+	const [second, setSecond] = useState(0)
+	const [day, setDay] = useState(0)
+	const [pm, setPm] = useState(false)
+
+	useEffect(() => {
+		const update = () => {
+			const date = new Date()
+			let hour = date.getHours()
+			if (!h24) {
+				hour = hour % 12 || 12
+			}
+			setHour(hour)
+			setMinute(date.getMinutes())
+			setSecond(date.getSeconds())
+			setDay(date.getDay())
+			setPm(date.getHours() >= 12)
+		}
+
+		update()
+
+		const interval = setInterval(() => {
+			update()
+		}, 1000)
+
+		return () => clearInterval(interval)
+	}, [h24])
+
+	return (
+		<div className='clock shadow border m-2 rounded-lg flex items-center flex-col overflow-hidden px-4 py-7'>
+			<div className='calendar flex gap-4 2xl:text-3xl text-xl mb-3'>
+				{days.map((value, index) => (
+					<Word key={value} value={value} hidden={index != day} />
+				))}
+			</div>
+			<div className='clock-row flex gap-4 items-center'>
+				<div className='hour 2xl:text-7xl text-5xl'>
+					<Number value={hour} />
+					<Word value={':'} />
+					<Number value={minute} />
+					<Word value={':'} />
+					<Number value={second} />
+				</div>
+				<div className='ampm 2xl:text-5xl text-4xl'>
+					<Word value={'AM'} hidden={pm} />
+					<Word value={'PM'} hidden={!pm} />
+				</div>
+			</div>
+		</div>
+	)
+}

components/CClock/Number.js

@@ -0,0 +1,9 @@
+export const Number = ({ value = 0 }) => {
+	const result = String(value).padStart(2, '0')
+	return (
+		<div className='digital'>
+			<p>88</p>
+			<p>{result}</p>
+		</div>
+	)
+}

components/CClock/Word.js

@@ -0,0 +1,13 @@
+export const Word = ({ value, hidden = false }) => {
+	const getStyle = () => {
+		return {
+			visibility: hidden ? 'hidden' : 'visible',
+		}
+	}
+	return (
+		<div className='digital'>
+			<p>{value}</p>
+			<p style={getStyle()}>{value}</p>
+		</div>
+	)
+}