Spaces:
Sleeping
Sleeping
File size: 2,191 Bytes
bf8b26e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
'use client';
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { classNames } from '~/utils/classNames';
const badgeVariants = cva(
'inline-flex items-center gap-1 transition-colors focus:outline-none focus:ring-2 focus:ring-bolt-elements-ring focus:ring-offset-2',
{
variants: {
variant: {
default:
'border-transparent bg-bolt-elements-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background/80',
secondary:
'border-transparent bg-bolt-elements-background text-bolt-elements-textSecondary hover:bg-bolt-elements-background/80',
destructive: 'border-transparent bg-red-500/10 text-red-500 hover:bg-red-500/20',
outline: 'text-bolt-elements-textPrimary',
primary: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
success: 'bg-green-500/10 text-green-600 dark:text-green-400',
warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',
danger: 'bg-red-500/10 text-red-600 dark:text-red-400',
info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
subtle:
'border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 bg-white/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
},
size: {
default: 'rounded-full px-2.5 py-0.5 text-xs font-semibold',
sm: 'rounded-full px-1.5 py-0.5 text-xs',
md: 'rounded-md px-2 py-1 text-xs font-medium',
lg: 'rounded-md px-2.5 py-1.5 text-sm',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
);
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
icon?: string;
}
function Badge({ className, variant, size, icon, children, ...props }: BadgeProps) {
return (
<div className={classNames(badgeVariants({ variant, size }), className)} {...props}>
{icon && <span className={icon} />}
{children}
</div>
);
}
export { Badge, badgeVariants };
|