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
55
56
57
58
59
60
61
62
63
64
65
| 'use client'
| import classNames from '@/utils/classnames'
|
| const variantStyles = {
| medium: 'rounded-lg px-1.5 ring-1 ring-inset',
| } as { [key: string]: string }
|
| const colorStyles = {
| emerald: {
| small: 'text-emerald-500 dark:text-emerald-400',
| medium:
| 'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400',
| },
| sky: {
| small: 'text-sky-500',
| medium:
| 'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400',
| },
| amber: {
| small: 'text-amber-500',
| medium:
| 'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400',
| },
| rose: {
| small: 'text-red-500 dark:text-rose-500',
| medium:
| 'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400',
| },
| zinc: {
| small: 'text-zinc-400 dark:text-zinc-500',
| medium:
| 'ring-zinc-200 bg-zinc-50 text-zinc-500 dark:ring-zinc-500/20 dark:bg-zinc-400/10 dark:text-zinc-400',
| },
| } as { [key: string]: { [key: string]: string } }
|
| const valueColorMap = {
| get: 'emerald',
| post: 'sky',
| put: 'amber',
| delete: 'rose',
| } as { [key: string]: string }
|
| type ITagProps = {
| children: string
| color?: string
| variant?: string
| }
|
| export function Tag({
| children,
| variant = 'medium',
| color = valueColorMap[children.toLowerCase()] ?? 'emerald',
| }: ITagProps) {
| return (
| <span
| className={classNames(
| 'font-mono text-[0.625rem] font-semibold leading-6',
| variantStyles[variant],
| colorStyles[color][variant],
| )}
| >
| {children}
| </span>
| )
| }
|
|
