Add all repos

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>
+  );
+};