first commit

components/Badge.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+const TONES = {
+  gold: "badge-gold",
+  blue: "badge-blue",
+  purple: "badge-purple",
+  green: "badge-green",
+  red: "badge-red",
+  gray: "badge-gray",
+} as const;
+
+export type BadgeTone = keyof typeof TONES;
+
+export default function Badge({
+  tone = "gray",
+  children,
+}: {
+  tone?: BadgeTone;
+  children: React.ReactNode;
+}) {
+  return <span className={`badge ${TONES[tone]}`}>{children}</span>;
+}