Tag

1
import { Tag } from "@/shared/ui/tag";
2
3
// Props:
4
//   text        — the label to show.
5
//   variant     — visual style: "muted", "primary", or "color" (default "muted").
6
//   colorIndex  — which pastel color to use (0-5). Only applies when variant="color".
7
//   className   — extra CSS classes.
8
9
// Muted (default)
10
<Tag text="React" />
11
<Tag text="Next.js" />
12
<Tag text="TypeScript" />
13
<Tag text="Tailwind CSS" />
14
15
// Primary
16
<Tag text="Node.js" variant="primary" />
17
<Tag text="Spring Boot" variant="primary" />
18
<Tag text="PostgreSQL" variant="primary" />
19
<Tag text="Docker" variant="primary" />
20
21
// Color (pastel palette — 6 unique colors)
22
<Tag text="Yellow" variant="color" colorIndex={0} />
23
<Tag text="Orange" variant="color" colorIndex={1} />
24
<Tag text="Lime" variant="color" colorIndex={2} />
25
<Tag text="Cyan" variant="color" colorIndex={3} />
26
<Tag text="Violet" variant="color" colorIndex={4} />
27
<Tag text="Rose" variant="color" colorIndex={5} />
28
29
// Skill groups with color
30
<div className="rounded-lg border bg-card p-4">
31
  <h4 className="text-xs font-semibold uppercase tracking-wider mb-2">
32
    Frontend
33
  </h4>
34
  <div className="flex flex-wrap gap-1.5">
35
    <Tag text="React" variant="color" colorIndex={1} />
36
    <Tag text="Next.js" variant="color" colorIndex={1} />
37
    <Tag text="TypeScript" variant="color" colorIndex={1} />
38
  </div>
39
</div>