13 lines
650 B
TypeScript
13 lines
650 B
TypeScript
import { clsx } from "clsx";
|
|
import type { ReactNode } from "react";
|
|
|
|
export function Chip({ children, tone = "mint", className }: { children: ReactNode; tone?: "mint" | "indigo" | "saffron" | "coral"; className?: string }) {
|
|
const tones = {
|
|
mint: "bg-mint/12 text-forest ring-mint/20 dark:text-mint",
|
|
indigo: "bg-indigo/12 text-indigo ring-indigo/20",
|
|
saffron: "bg-saffron/14 text-[#8a5a12] ring-saffron/25 dark:text-saffron",
|
|
coral: "bg-coral/12 text-coral ring-coral/20"
|
|
};
|
|
return <span className={clsx("inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ring-1", tones[tone], className)}>{children}</span>;
|
|
}
|