From 7e2132662fa44babbe9f5fa623eb50bde1957097 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 24 Jan 2025 10:09:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Badge=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Badge.module.css | 12 ++++++++++++
 src/components/Badge.tsx        | 12 ++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/components/Badge.module.css
 create mode 100644 src/components/Badge.tsx

diff --git a/src/components/Badge.module.css b/src/components/Badge.module.css
new file mode 100644
index 0000000..83a6211
--- /dev/null
+++ b/src/components/Badge.module.css
@@ -0,0 +1,12 @@
+@layer components {
+  .badge {
+    padding: var(--spacing-xs) var(--spacing-s);
+    border-radius: var(--border-radius-xs);
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    line-height: 1.2em;
+  }
+}
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 0000000..cd6ce47
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,12 @@
+import cx from 'clsx';
+import { ReactNode } from 'react';
+import styles from './Badge.module.css';
+
+type BadgeProps = {
+  extendClassName?: HTMLDivElement['className'];
+  children?: ReactNode;
+};
+
+export function Badge({ extendClassName, children }: BadgeProps) {
+  return <div className={cx(styles.badge, extendClassName)}>{children}</div>;
+}