1import clsx from 'clsx'
 2
 3const variantStyles = {
 4  medium: 'rounded-lg px-1.5 ring-1 ring-inset',
 5}
 6
 7const colorStyles = {
 8  emerald: {
 9    small: 'text-emerald-500 dark:text-emerald-400',
10    medium:
11      'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400',
12  },
13  sky: {
14    small: 'text-sky-500',
15    medium:
16      'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400',
17  },
18  amber: {
19    small: 'text-amber-500',
20    medium:
21      'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400',
22  },
23  rose: {
24    small: 'text-red-500 dark:text-rose-500',
25    medium:
26      'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400',
27  },
28  zinc: {
29    small: 'text-zinc-400 dark:text-zinc-500',
30    medium:
31      'ring-zinc-200 bg-zinc-50 text-zinc-500 dark:ring-zinc-500/20 dark:bg-zinc-400/10 dark:text-zinc-400',
32  },
33}
34
35const valueColorMap = {
36  get: 'emerald',
37  post: 'sky',
38  put: 'amber',
39  delete: 'rose',
40}
41
42export function Tag({
43  children,
44  variant = 'medium',
45  color = valueColorMap[children.toLowerCase()] ?? 'emerald',
46}) {
47  return (
48    <span
49      className={clsx(
50        'font-mono text-[0.625rem] font-semibold leading-6',
51        variantStyles[variant],
52        colorStyles[color][variant]
53      )}
54    >
55      {children}
56    </span>
57  )
58}