Organize directories

apps/metamigo-frontend/components/DigitInput/DigitInput.module.css

@@ -0,0 +1,27 @@
+.input {
+  width: 40px;
+  height: 60px;
+  margin: 5px;
+  font-size: 1.4rem;
+  padding: 0 9px 0 12px;
+  border: none;
+  outline: none;
+  background: white;
+  font-weight: 400;
+  color: rgba(59, 59, 59, 0.788);
+  -webkit-box-shadow: 2px 2px 2px 1px #d6d6d6, -1px -1px 1px #e6e6e6;
+  box-shadow: 2px 2px 2px 1px #d6d6d6, -1px -1px 1px #e6e6e6;
+  border-radius: 5px;
+}
+
+.group {
+  margin-top: 1.6rem;
+}
+
+.hyphen {
+  background: black;
+  height: 0.1em;
+  width: 1em;
+  margin: 0 0.5em;
+  display: inline-block;
+}

apps/metamigo-frontend/components/DigitInput/index.tsx

@@ -0,0 +1,60 @@
+import { forwardRef } from "react";
+import useDigitInput, { InputAttributes } from "react-digit-input";
+import styles from "./DigitInput.module.css";
+
+const DigitInputElement = forwardRef<
+  HTMLInputElement,
+  Omit<InputAttributes, "ref"> & {
+    autoFocus?: boolean;
+  }
+>(({ ...props }, ref) => {
+  return (
+    <>
+      <input
+        aria-label="verification code"
+        className={styles.input}
+        {...props}
+        ref={ref}
+        inputMode="decimal"
+      />
+    </>
+  );
+});
+
+const DigitSeparator = forwardRef<
+  HTMLInputElement,
+  Omit<InputAttributes, "ref"> & {
+    autoFocus?: boolean;
+  }
+>(({ ...props }, ref) => {
+  return (
+    <>
+      <span className={styles.hyphen} ref={ref} />
+    </>
+  );
+});
+
+export const SixDigitInput = ({ value, onChange }: any) => {
+  const digits = useDigitInput({
+    acceptedCharacters: /^[0-9]$/,
+    length: 6,
+    value,
+    onChange,
+  });
+  return (
+    <div>
+      <div className={styles.group}>
+        <DigitInputElement autoFocus {...digits[0]} />
+        <DigitInputElement {...digits[1]} />
+        <DigitInputElement {...digits[2]} />
+        <DigitSeparator />
+        <DigitInputElement {...digits[3]} />
+        <DigitInputElement {...digits[4]} />
+        <DigitInputElement {...digits[5]} />
+      </div>
+      <pre hidden>
+        <code>{value}</code>
+      </pre>
+    </div>
+  );
+};