Add children in Input

marshallku · Dec 4, 2024 · 82e9e8f · 82e9e8f
1 parent fd634f3
commit 82e9e8f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/packages/ui/src/components/Input/index.module.scss b/packages/ui/src/components/Input/index.module.scss
@@ -2,6 +2,11 @@
     display: block;
     padding: 4px 12px;
 
+    &--has-child {
+        display: flex;
+        align-items: center;
+    }
+
     &--box {
         background-color: color(comment);
         border-radius: 4px;
@@ -26,4 +31,9 @@
         display: block;
         width: 100%;
     }
+
+    &__children {
+        flex-shrink: 0;
+        margin-left: 4px;
+    }
 }
diff --git a/packages/ui/src/components/Input/index.tsx b/packages/ui/src/components/Input/index.tsx
@@ -1,4 +1,4 @@
-import { type InputHTMLAttributes, forwardRef } from "react";
+import { type InputHTMLAttributes, ReactNode, forwardRef } from "react";
 import { classNames } from "@marshallku/utils";
 import Typography from "../Typography";
 import styles from "./index.module.scss";
@@ -8,22 +8,26 @@ type InputVariant = "line" | "box";
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     variant?: InputVariant;
     label?: string;
+    children?: ReactNode;
 }
 
 const cx = classNames(styles, "input");
 
-const Input = forwardRef<HTMLInputElement, InputProps>(({ className, label, variant = "box", ...props }, ref) => {
-    return (
-        <label className={cx("", `--${variant}`, { className })}>
-            {!!label && (
-                <Typography variant="c1" className={cx("__label")} component="div">
-                    {label}
-                </Typography>
-            )}
-            <input className={cx("__input")} {...props} ref={ref} />
-        </label>
-    );
-});
+const Input = forwardRef<HTMLInputElement, InputProps>(
+    ({ className, label, variant = "box", children, ...props }, ref) => {
+        return (
+            <label className={cx("", `--${variant}`, children && "--has-child", { className })}>
+                {!!label && (
+                    <Typography variant="c1" className={cx("__label")} component="div">
+                        {label}
+                    </Typography>
+                )}
+                <input className={cx("__input")} {...props} ref={ref} />
+                {children && <div className={cx("__children")}>{children}</div>}
+            </label>
+        );
+    },
+);
 
 Input.displayName = "Input";