Wojtek
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
import { tv } from 'tailwind-variants';
|
|
|
|
import type { ComponentPropsWithoutRef } from 'react';
|
|
import type { VariantProps } from 'tailwind-variants';
|
|
|
|
export const ALL_BADGE_COLORS = ['green', 'blue', 'brown', 'purple', 'yellow', 'grey'] as const;
|
|
export type BadgeColor = (typeof ALL_BADGE_COLORS)[number];
|
|
|
|
export function isBadgeColor(value: string): value is BadgeColor {
|
|
return ALL_BADGE_COLORS.includes(value as BadgeColor);
|
|
}
|
|
|
|
const badge = tv({
|
|
base: 'font-sans text-base inline-block',
|
|
variants: {
|
|
color: {
|
|
green: 'bg-success-100 text-success-800',
|
|
blue: 'bg-blue-100 text-blue-800',
|
|
brown: 'bg-[#FFE7BD] text-[#421400]',
|
|
purple: 'bg-[#F7ECFF] text-[#6B32E4]',
|
|
yellow: 'bg-warning-100 text-warning-700',
|
|
grey: 'bg-grey-100 text-grey-800',
|
|
},
|
|
roundness: {
|
|
default: 'rounded-md',
|
|
xl: 'rounded-2xl',
|
|
},
|
|
size: {
|
|
default: 'px-3 py-2 font-normal',
|
|
sm: 'px-3.5 py-1 leading-5 font-normal',
|
|
},
|
|
},
|
|
});
|
|
|
|
type BadgeProps = ComponentPropsWithoutRef<'div'> & VariantProps<typeof badge>;
|
|
|
|
export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
|
|
{ className, color = 'grey', roundness = 'default', size = 'default', ...other },
|
|
forwardedRef,
|
|
) {
|
|
return <div {...other} className={twMerge(badge({ color, roundness, size }), className)} ref={forwardedRef} />;
|
|
});
|