From 8e12f9f74a720291fe4bfaac1c283a0e7ec86052 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 7 Jan 2025 05:56:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=E7=BB=99=E5=85=B6=E4=BB=96=E7=BB=84=E4=BB=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0Label=E7=9A=84=E7=BB=84=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Labeled.module.css | 16 ++++++++++++++++
 src/components/Labeled.tsx        | 15 +++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/components/Labeled.module.css
 create mode 100644 src/components/Labeled.tsx

diff --git a/src/components/Labeled.module.css b/src/components/Labeled.module.css
new file mode 100644
index 0000000..14575fd
--- /dev/null
+++ b/src/components/Labeled.module.css
@@ -0,0 +1,16 @@
+@layer components {
+  .labeled {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+    label {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      font-size: var(--font-size-xs);
+    }
+  }
+}
diff --git a/src/components/Labeled.tsx b/src/components/Labeled.tsx
new file mode 100644
index 0000000..70fc8cd
--- /dev/null
+++ b/src/components/Labeled.tsx
@@ -0,0 +1,15 @@
+import styles from './Labeled.module.css';
+
+type LabeledProps = {
+  label: string;
+  children: React.ReactNode;
+};
+
+export function Labeled({ label, children }: LabeledProps) {
+  return (
+    <div className={styles.labeled}>
+      <label>{label}</label>
+      {children}
+    </div>
+  );
+}