ConstraintToken.tsx44 lines · main

1	import { ReactNode } from 'react'
2	import { cn } from 'ui'
3
4	interface ConstraintTokenProps {
5	icon?: ReactNode
6	label: string
7	variant?: 'default' | 'secondary' | 'primary'
8	}
9
10	const constraintTokenClassName = cn(
11	'inline-flex items-center justify-center rounded-md text-center font-mono uppercase whitespace-nowrap font-medium',
12	'tracking-[0.06em] text-[11px] leading-[1.1] px-[5.5px] h-[21px]',
13	'transition-all border'
14	)
15
16	export const ConstraintToken = ({ icon, label, variant = 'default' }: ConstraintTokenProps) => {
17	const tokenToneClassName =
18	variant === 'primary'
19	? 'bg-brand/10 text-brand-600 border-brand-500'
20	: variant === 'default'
21	? 'bg-surface-75 text-foreground-light border-strong'
22	: 'bg-surface-75/50 text-foreground-light border-strong'
23
24	return (
25	<div className="inline-flex items-center whitespace-nowrap">
26	{icon && (
27	<span
28	className={cn(constraintTokenClassName, tokenToneClassName, 'rounded-r-none border-r-0')}
29	>
30	{icon}
31	</span>
32	)}
33	<span
34	className={cn(
35	constraintTokenClassName,
36	tokenToneClassName,
37	icon ? 'rounded-l-none' : 'rounded-md'
38	)}
39	>
40	{label}
41	</span>
42	</div>
43	)
44	}