Sticker Creator

sticker-creator/elements/LabeledInput.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import * as styles from './LabeledInput.scss';
+import { Inline } from './Typography';
+
+export type Props = {
+  children: React.ReactNode;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => unknown;
+};
+
+export const LabeledInput = React.memo(
+  ({ children, value, placeholder, onChange }: Props) => {
+    const handleChange = React.useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(e.currentTarget.value);
+      },
+      [onChange]
+    );
+
+    return (
+      <label className={styles.container}>
+        <Inline className={styles.label}>{children}</Inline>
+        <input
+          type="text"
+          className={styles.input}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+        />
+      </label>
+    );
+  }
+);