CountdownStep.tsx48 lines · main

1	'use client'
2
3	import { useEffect, useState } from 'react'
4	import { cn } from 'ui'
5
6	interface CountdownStepProps {
7	value: string | number
8	unit: string
9	showCard?: boolean
10	size?: 'small' | 'large'
11	}
12
13	function CountdownStep({ value, unit, showCard = true, size = 'small' }: CountdownStepProps) {
14	const isLarge = size === 'large'
15	const [isMounted, setIsMounted] = useState(false)
16	const valueWithZero = (value as number) > 9 ? value : '0' + value
17
18	useEffect(() => {
19	setIsMounted(true)
20	}, [])
21
22	if (!isMounted) return null
23
24	return (
25	<div
26	className={cn(
27	'uppercase tracking-[0.05rem] text-sm',
28	showCard
29	? 'rounded-md p-px overflow-hidden bg-linear-to-b from-border-muted to-border-muted/20'
30	: 'tracking-[0.1rem]',
31	isLarge && 'text-lg'
32	)}
33	>
34	<div
35	className={cn(
36	showCard
37	? 'py-1 px-2 rounded-md w-11 leading-4 flex items-center justify-center bg-black backdrop-blur-md'
38	: cn('flex items-center justify-center w-7 py-1 px-1', isLarge && 'w-9')
39	)}
40	>
41	<span className="m-0">{valueWithZero}</span>
42	<span>{unit}</span>
43	</div>
44	</div>
45	)
46	}
47
48	export default CountdownStep