♿️ Add input labels

wancup · Feb 5, 2025 · dcf87b8 · dcf87b8
1 parent 553f972
commit dcf87b8
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 24 deletions.
diff --git a/src/features/directory-tree/ui/directory-tree-input.tsx b/src/features/directory-tree/ui/directory-tree-input.tsx
@@ -1,6 +1,7 @@
 import { css } from "$panda/css";
+import { FormLabel } from "$park/form-label";
 import { Textarea, type TextareaProps } from "$park/textarea";
-import { createSignal, type JSX } from "solid-js";
+import { createSignal, createUniqueId, type JSX } from "solid-js";
 import { DirectoryTree } from "../logic/directory-tree";
 
 const SAMPLE_RAW_TEXT = `\
@@ -21,6 +22,10 @@ const SAMPLE_STYLED_TEXT = `\
 export function DirectoryTreeInput(): JSX.Element {
   const [rawText, setRawText] = createSignal("");
   const [styledText, setStyledText] = createSignal("");
+  const id = createUniqueId();
+
+  const rawTextInputId = `raw-text-input-${id}`;
+  const styledTextInputId = `styled-text-input-${id}`;
 
   const handleInputRawText: JSX.EventHandler<HTMLTextAreaElement, InputEvent> = (e) => {
     setRawText(e.currentTarget.value);
@@ -37,27 +42,64 @@ export function DirectoryTreeInput(): JSX.Element {
   };
 
   return (
-    <div
-      class={css({
-        width: "100%",
-        display: "flex",
-        overflow: "scroll",
-        resize: "vertical",
-        flexDirection: "column",
-        rowGap: "0.5rem",
-        md: { flexDirection: "row", justifyContent: "space-between", columnGap: "1rem" },
-      })}
-    >
-      <StyledTextarea
-        value={rawText()}
-        onInput={handleInputRawText}
-        placeholder={SAMPLE_RAW_TEXT}
-      />
-      <StyledTextarea
-        value={styledText()}
-        onInput={handleInputStyledText}
-        placeholder={SAMPLE_STYLED_TEXT}
-      />
+    <div>
+      <div
+        class={css({
+          width: "100%",
+          md: { display: "none" },
+        })}
+      >
+        <div class={css({ marginBottom: "0.5rem" })}>
+          <FormLabel for={rawTextInputId}>Directory Tree With Hyphen</FormLabel>
+          <StyledTextarea
+            id={rawTextInputId}
+            value={rawText()}
+            onInput={handleInputRawText}
+            placeholder={SAMPLE_RAW_TEXT}
+          />
+        </div>
+        <div>
+          <FormLabel for={styledTextInputId}>Styled Directory Tree</FormLabel>
+          <StyledTextarea
+            id={styledTextInputId}
+            value={styledText()}
+            onInput={handleInputStyledText}
+            placeholder={SAMPLE_STYLED_TEXT}
+          />
+        </div>
+      </div>
+      <div
+        class={css({
+          display: "none",
+          md: { display: "grid", width: "100%", gridTemplateColumns: "1fr 1fr", columnGap: "1rem" },
+        })}
+      >
+        <FormLabel for={rawTextInputId}>Directory Tree With Hyphen</FormLabel>
+        <FormLabel for={styledTextInputId}>Styled Directory Tree</FormLabel>
+        <div
+          class={css({
+            gridColumn: "1 / 3",
+            overflow: "scroll",
+            display: "flex",
+            justifyContent: "space-between",
+            columnGap: "1rem",
+            resize: "vertical",
+          })}
+        >
+          <StyledTextarea
+            id={rawTextInputId}
+            value={rawText()}
+            onInput={handleInputRawText}
+            placeholder={SAMPLE_RAW_TEXT}
+          />
+          <StyledTextarea
+            id={styledTextInputId}
+            value={styledText()}
+            onInput={handleInputStyledText}
+            placeholder={SAMPLE_STYLED_TEXT}
+          />
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/src/features/qr-code/ui/qr-code-generator.tsx b/src/features/qr-code/ui/qr-code-generator.tsx
@@ -1,14 +1,20 @@
 import { css } from "$panda/css";
+import { FormLabel } from "$park/form-label";
 import { Input } from "$park/input";
 import { QrCode } from "$park/qr-code";
-import { createSignal, type JSX, Show } from "solid-js";
+import { createSignal, createUniqueId, type JSX, Show } from "solid-js";
 
 export function QrCodeGenerator(): JSX.Element {
   const [text, setText] = createSignal("");
 
+  const id = createUniqueId();
+  const qrcodeInputId = `qr-code-input-${id}`;
+
   return (
     <>
+      <FormLabel for={qrcodeInputId}>Text to convert</FormLabel>
       <Input
+        id={qrcodeInputId}
         class={css({ marginBottom: "1rem" })}
         value={text()}
         onInput={(e) => {

diff --git a/src/features/uri-encoding/ui/uri-converter.tsx b/src/features/uri-encoding/ui/uri-converter.tsx
@@ -1,7 +1,8 @@
 import { css } from "$panda/css";
+import { FormLabel } from "$park/form-label";
 import { Input } from "$park/input";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-solid";
-import { createMemo, createSignal, type JSX } from "solid-js";
+import { createMemo, createSignal, createUniqueId, type JSX } from "solid-js";
 
 const URI_ENCODER = {
   encode: encodeURI,
@@ -22,12 +23,17 @@ export function UriConverter(
 ): JSX.Element {
   const [rawText, setRawText] = createSignal("");
   const [encodedText, setEncodedText] = createSignal("");
+  const id = createUniqueId();
 
   const encoder = createMemo(() => props.type === "uri" ? URI_ENCODER : URI_COMPONENT_ENCODER);
+  const originalId = `original-input-${id}`;
+  const encodedId = `encoded-input-${id}`;
 
   return (
     <>
+      <FormLabel for={originalId}>Original Text</FormLabel>
       <Input
+        id={originalId}
         placeholder={props.placeholder}
         value={rawText()}
         onInput={(e) => {
@@ -44,7 +50,9 @@ export function UriConverter(
         <ArrowDownIcon class={css({ marginLeft: "auto" })} />
         <ArrowUpIcon class={css({ marginRight: "auto" })} />
       </div>
+      <FormLabel for={encodedId}>Encoded Text</FormLabel>
       <Input
+        id={encodedId}
         placeholder={encoder().encode(props.placeholder)}
         value={encodedText()}
         onInput={(e) => {