35 行
924 B
TypeScript
35 行
924 B
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
import type { FC, ReactNode } from 'react'
|
|
|
|
export type StatusBadgeTone =
|
|
'success'
|
|
| 'neutral'
|
|
| 'warning'
|
|
|
|
type Props = {
|
|
children: ReactNode
|
|
tone: StatusBadgeTone }
|
|
|
|
const TONES: Record<StatusBadgeTone, string[]> = {
|
|
success: [
|
|
'border-emerald-300 bg-emerald-50 text-emerald-700',
|
|
'dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200'],
|
|
warning: [
|
|
'border-amber-300 bg-amber-50 text-amber-700',
|
|
'dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200'],
|
|
neutral: [
|
|
'border-stone-300 bg-stone-50 text-stone-700',
|
|
'dark:border-stone-700 dark:bg-stone-900 dark:text-stone-200'] }
|
|
|
|
|
|
const StatusBadge: FC<Props> = ({ children, tone }) => (
|
|
<span
|
|
className={cn (
|
|
'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium',
|
|
TONES[tone])}>
|
|
{children}
|
|
</span>)
|
|
|
|
export default StatusBadge
|