35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { cn } from './utils';
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva } from 'class-variance-authority';
|
|
import type { HTMLAttributes, PropsWithChildren } from 'react';
|
|
import { forwardRef } from 'react';
|
|
|
|
const variants = cva('mr-2 rounded-md px-2.5 py-0.5 text-xs font-medium w-fit', {
|
|
defaultVariants: {
|
|
color: 'default',
|
|
},
|
|
variants: {
|
|
color: {
|
|
default: 'bg-blue-100 text-blue-800',
|
|
green: 'bg-green-100 text-green-800',
|
|
indigo: 'bg-indigo-100 text-indigo-800',
|
|
pink: 'bg-pink-100 text-pink-800',
|
|
purple: 'bg-purple-100 text-purple-800',
|
|
red: 'bg-red-100 text-red-80',
|
|
yellow: 'bg-yellow-100 text-yellow-800',
|
|
},
|
|
},
|
|
});
|
|
|
|
export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
|
|
VariantProps<typeof variants> &
|
|
PropsWithChildren;
|
|
|
|
export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
|
|
({ children, className, color, ...props }, ref) => (
|
|
<span className={cn(variants({ className, color }))} {...props} ref={ref}>
|
|
{children}
|
|
</span>
|
|
)
|
|
);
|