App directory #4

apps/metamigo-frontend/app/_components/DigitInput/index.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+/* eslint-disable react/display-name */
+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): any => (
+  <>
+    <input
+      aria-label="verification code"
+      className={styles.input}
+      {...props}
+      ref={ref}
+      inputMode="decimal"
+    />
+  </>
+));
+
+const DigitSeparator = forwardRef<
+  HTMLInputElement,
+  Omit<InputAttributes, "ref"> & {
+    autoFocus?: boolean;
+  }
+>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ({ ...props }, ref): any => (
+    <>
+      <span className={styles.hyphen} ref={ref} />
+    </>
+  )
+);
+
+export const SixDigitInput = ({ value, onChange }: any) => {
+  const digits = useDigitInput({
+    acceptedCharacters: /^\d$/,
+    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>
+  );
+};