this repo has no description
1import { cn } from "~/design-system/utils/cn";
2
3interface TypeBadgeProps {
4 type: string;
5 className?: string;
6}
7
8/**
9 * Badge for displaying Pokemon types.
10 *
11 * Simple bordered label that fits the console aesthetic.
12 * Multiple badges can be displayed inline for dual-type Pokemon.
13 *
14 * @example
15 * <TypeBadge type="fire" />
16 * <TypeBadge type="flying" />
17 */
18export function TypeBadge({ type, className }: TypeBadgeProps) {
19 return (
20 <span
21 className={cn(
22 "inline-block",
23 "px-2 py-0.5",
24 "text-xs font-mono",
25 "border border-(--border-default)",
26 "bg-(--bg-secondary)",
27 "text-(--text-secondary)",
28 "capitalize",
29 "mr-1",
30 className,
31 )}
32 >
33 {type}
34 </span>
35 );
36}