feat: verificationTokenComponent (#9476)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/ui/components/TokenHandler/TokenHandler.tsx

@@ -0,0 +1,36 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, Input } from "@calcom/ui";
+
+type Digit = {
+  value: number;
+  onChange: () => void;
+};
+type PropType = {
+  digits: Digit[];
+  digitClassName: string;
+};
+
+const TokenHandler = ({ digits, digitClassName }: PropType) => {
+  const { t } = useLocale();
+
+  return (
+    <div>
+      <Label htmlFor="code">{t("code")}</Label>
+      <div className="flex flex-row justify-between">
+        {digits.map((element, index) => (
+          <Input
+            key={index}
+            className={digitClassName}
+            name={`2fa${index + 1}`}
+            inputMode="decimal"
+            {...element}
+            autoFocus={index === 0}
+            autoComplete="one-time-code"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TokenHandler;

packages/ui/components/TokenHandler/tokenhandler.stories.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable } from '@calcom/storybook/components'
+import TokenHandler from './TokenHandler'
+
+<Meta title="UI/TokenHandler" component={TokenHandler} />
+<Title title="TokenHandler"  subtitle="Version 0.1"/>
+
+## Structure
+
+<TokenHandler digits={[
+    {
+      value: "1",
+      onChange: (e) => {},
+    },
+    {
+      value: "2",
+      onChange: (e) => {},
+    },
+    {
+      value: "3",
+      onChange: (e) => {},
+    },
+    {
+      value: "4",
+      onChange: (e) => {},
+    },
+    {
+      value: "5",
+      onChange: (e) => {},
+    },
+    {
+      value: "6",
+      onChange: (e) => {},
+    },
+  ]} digitClassName="digit-input" />
+
+#all the numbers should be visible while the first one is focused