TwoOptionToggle.tsx63 lines · main

1	import { cn } from 'ui'
2
3	interface TwoOptionToggleProps {
4	options: string[]
5	width?: number
6	activeOption: string
7	onClickOption: (value: string) => void
8	borderOverride: string
9	}
10
11	export const TwoOptionToggle = ({
12	options,
13	width = 50,
14	activeOption,
15	onClickOption,
16	borderOverride = 'border-stronger',
17	}: TwoOptionToggleProps) => {
18	const buttonStyle = (
19	isActive: boolean
20	) => `absolute top-0 z-1 text-xs inline-flex h-full items-center justify-center font-medium
21	${
22	isActive ? 'hover:text-foreground-light hover:text-foreground' : 'hover:text-foreground'
23	} hover:text-foreground focus:z-10 focus:outline-hidden focus:border-blue-300 focus:ring-blue
24	transition ease-in-out duration-150`
25
26	return (
27	<div
28	className={`relative border ${borderOverride} rounded-md h-7`}
29	style={{ padding: 1, width: (width + 1) * 2 }}
30	>
31	<span
32	style={{ width, translate: activeOption === options[1] ? '0px' : `${width - 2}px` }}
33	aria-hidden="true"
34	className={cn(
35	'z-0 inline-block rounded-sm h-full bg-overlay-hover shadow-sm transform',
36	'transition-all ease-in-out border border-strong'
37	)}
38	/>
39	{options.map((option, index: number) => (
40	<span
41	key={`toggle_${index}`}
42	style={{ width: width + 1 }}
43	className={`
44	${activeOption === option ? 'text-foreground' : 'text-foreground-light'}
45	${index === 0 ? 'right-0' : 'left-0'}
46	${buttonStyle(activeOption === option)}
47	cursor-pointer
48	`}
49	onClick={() => onClickOption(option)}
50	>
51	<span
52	className={cn(
53	'capitalize hover:text-foreground',
54	activeOption === option ? 'text-foreground' : 'text-foreground-light'
55	)}
56	>
57	{option}
58	</span>
59	</span>
60	))}
61	</div>
62	)
63	}