74 lines
3.1 KiB
JavaScript
74 lines
3.1 KiB
JavaScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
const Badge = ({
|
|
children,
|
|
variant = 'default',
|
|
size = 'md',
|
|
className = '',
|
|
...props
|
|
}) => {
|
|
const baseClassName = 'inline-flex items-center font-medium border';
|
|
|
|
const variants = {
|
|
default: 'bg-neutral-200/80 text-neutral-700 border-neutral-300 dark:bg-neutral-500/10 dark:text-neutral-400 dark:border-neutral-500/20',
|
|
primary: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/20',
|
|
success: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-500/10 dark:text-green-400 dark:border-green-500/20',
|
|
warning: 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-500/10 dark:text-yellow-400 dark:border-yellow-500/20',
|
|
danger: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/20',
|
|
info: 'bg-cyan-100 text-cyan-700 border-cyan-200 dark:bg-cyan-500/10 dark:text-cyan-400 dark:border-cyan-500/20',
|
|
purple: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-500/10 dark:text-purple-400 dark:border-purple-500/20',
|
|
pink: 'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-500/10 dark:text-pink-400 dark:border-pink-500/20',
|
|
orange: 'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-500/10 dark:text-orange-400 dark:border-orange-500/20'
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'px-2 py-0.5 rounded-lg text-[12px]',
|
|
md: 'px-2.5 py-0.5 rounded-lg text-[12px]',
|
|
lg: 'px-3 py-1 rounded-lg text-xs'
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={`${baseClassName} ${variants[variant]} ${sizes[size]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
// Predefined badge types for common use cases
|
|
export const StatusBadge = ({ status, ...props }) => {
|
|
const statusConfig = {
|
|
active: { variant: 'success', children: 'Active' },
|
|
inactive: { variant: 'default', children: 'Inactive' },
|
|
pending: { variant: 'warning', children: 'Pending' },
|
|
draft: { variant: 'warning', children: 'Draft' },
|
|
verified: { variant: 'success', children: 'Verified' },
|
|
unverified: { variant: 'warning', children: 'Unverified' },
|
|
admin: { variant: 'purple', children: 'Admin' },
|
|
user: { variant: 'default', children: 'User' }
|
|
};
|
|
|
|
const config = statusConfig[status] || { variant: 'default', children: status };
|
|
|
|
return <Badge {...config} {...props} />;
|
|
};
|
|
|
|
export const TypeBadge = ({ type, ...props }) => {
|
|
const typeConfig = {
|
|
service: { variant: 'primary', children: 'Service' },
|
|
physical: { variant: 'orange', children: 'Physical Product' },
|
|
digital: { variant: 'purple', children: 'Digital Product' },
|
|
hosting: { variant: 'info', children: 'Hosting' },
|
|
domain: { variant: 'pink', children: 'Domain' }
|
|
};
|
|
|
|
const config = typeConfig[type] || { variant: 'default', children: type };
|
|
|
|
return <Badge {...config} {...props} />;
|
|
};
|
|
|
|
export default Badge;
|