From a56d47314835ad97446178f545c5d99a7f1c4412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 15 Jan 2025 13:27:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=99=84=E5=8A=A0=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E7=BB=84=E4=BB=B6=E4=B8=AD=E6=B0=B4=E5=B9=B3=E6=8E=92?=
 =?UTF-8?q?=E5=88=97=E7=9A=84=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Labeled.module.css | 7 +++++++
 src/components/Labeled.tsx        | 6 ++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Labeled.module.css b/src/components/Labeled.module.css
index 14575fd..7afbb75 100644
--- a/src/components/Labeled.module.css
+++ b/src/components/Labeled.module.css
@@ -5,12 +5,19 @@
     flex-direction: column;
     align-items: stretch;
     gap: var(--spacing-xs);
+    &.inline {
+      flex-direction: row;
+      gap: var(--spacing-s);
+    }
     label {
       width: 100%;
       display: flex;
       flex-direction: row;
       align-items: baseline;
       font-size: var(--font-size-xs);
+      .inline & {
+        width: fit-content;
+      }
     }
   }
 }
diff --git a/src/components/Labeled.tsx b/src/components/Labeled.tsx
index 70fc8cd..114f1a6 100644
--- a/src/components/Labeled.tsx
+++ b/src/components/Labeled.tsx
@@ -1,13 +1,15 @@
+import cx from 'clsx';
 import styles from './Labeled.module.css';
 
 type LabeledProps = {
   label: string;
+  inline?: boolean;
   children: React.ReactNode;
 };
 
-export function Labeled({ label, children }: LabeledProps) {
+export function Labeled({ label, inline = false, children }: LabeledProps) {
   return (
-    <div className={styles.labeled}>
+    <div className={cx(styles.labeled, inline && styles.inline)}>
       <label>{label}</label>
       {children}
     </div>