index.tsx64 lines · main

1	import { cn } from 'ui/src/lib/utils'
2
3	import CountdownStep from './CountdownStep'
4
5	interface CountdownWidgetProps {
6	days?: string
7	hours?: string
8	minutes?: string
9	seconds?: string
10	showCard?: boolean
11	className?: string
12	dividerClassName?: string
13	size?: 'small' | 'large'
14	}
15
16	export function CountdownWidget({
17	days,
18	hours,
19	minutes,
20	seconds,
21	showCard = true,
22	className,
23	dividerClassName,
24	size,
25	}: CountdownWidgetProps) {
26	const isLarge = size === 'large'
27	const Colon = () => (
28	<span
29	className={cn(
30	'text-xs mx-px text-foreground-lighter',
31	isLarge && 'text-lg',
32	dividerClassName
33	)}
34	>
35	:
36	</span>
37	)
38
39	return (
40	<div className={cn('flex gap-1 items-center text-foreground-lighter', className)}>
41	{days !== undefined && days != '0' ? (
42	<>
43	<CountdownStep value={days} unit="d" showCard={showCard} size={size} />
44	<Colon />
45	</>
46	) : null}
47	{hours !== undefined && hours != '0' ? (
48	<>
49	<CountdownStep value={hours} unit="h" showCard={showCard} size={size} />
50	<Colon />
51	</>
52	) : null}
53	{minutes !== undefined && minutes != '0' ? (
54	<>
55	<CountdownStep value={minutes} unit="m" showCard={showCard} size={size} />
56	{seconds !== undefined && <Colon />}
57	</>
58	) : null}
59	{seconds !== undefined ? (
60	<CountdownStep value={seconds} unit="s" showCard={showCard} size={size} />
61	) : null}
62	</div>
63	)
64	}