64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { clsx } from 'clsx/lite';
|
|
|
|
export default function Badge({
|
|
children,
|
|
className,
|
|
type = 'large',
|
|
dimContent,
|
|
highContrast,
|
|
uppercase,
|
|
interactive,
|
|
}: {
|
|
children: React.ReactNode
|
|
className?: string
|
|
type?: 'large' | 'small' | 'text-only'
|
|
dimContent?: boolean
|
|
highContrast?: boolean
|
|
uppercase?: boolean
|
|
interactive?: boolean
|
|
}) {
|
|
const stylesForType = () => {
|
|
switch (type) {
|
|
case 'large':
|
|
return clsx(
|
|
'px-1.5 h-[26px]',
|
|
'rounded-md',
|
|
'bg-gray-100/80 dark:bg-gray-900/80',
|
|
'border border-gray-200/60 dark:border-gray-800/75',
|
|
);
|
|
case 'small':
|
|
return clsx(
|
|
'px-[5px] h-[17px] md:h-[18px]',
|
|
'text-[0.7rem] font-medium rounded-[0.25rem]',
|
|
highContrast
|
|
? 'text-invert bg-invert'
|
|
: 'text-medium bg-gray-300/30 dark:bg-gray-700/50',
|
|
interactive && (highContrast
|
|
? 'hover:opacity-70'
|
|
: 'hover:text-gray-900 dark:hover:text-gray-100'),
|
|
interactive && (highContrast
|
|
? 'active:opacity-90'
|
|
: 'active:bg-gray-200 dark:active:bg-gray-700/60'),
|
|
);
|
|
}
|
|
};
|
|
return (
|
|
<span className={clsx(
|
|
'max-w-full',
|
|
'inline-flex items-center',
|
|
stylesForType(),
|
|
uppercase && 'uppercase tracking-wider',
|
|
className,
|
|
)}>
|
|
<span className={clsx(
|
|
'max-w-full inline-flex',
|
|
// Truncate 1 + 2 levels deep
|
|
'truncate *:truncate',
|
|
dimContent && 'opacity-50',
|
|
)}>
|
|
{children}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|