init

src/features/login/components/phone-prompt.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@mantine/core";
+import PhoneNumberInput from "@/components/phone-number-input";
+import { useForm } from "@mantine/form";
+import useCreateCode from "../hooks/use-create-code";
+
+const PhonePrompt = () => {
+  const form = useForm({
+    initialValues: {
+      number: ''
+    },
+    validate: {
+      number: (value) => {
+        if (value.length === 0) return 'Phone number is required'
+        if (value.length !== 10) return 'Phone number must be 10 digits'
+      }
+    }
+  })
+
+  const { mutate: createCode, isPending } = useCreateCode();
+  const handleSubmit = (data: { number: string }) => {
+    form.reset();
+    return createCode(data.number);
+  }
+
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <PhoneNumberInput
+        id="number"
+        label='Enter your phone number'
+        key={form.key('number')}
+        {...form.getInputProps('number')}
+      />
+      <Button type='submit' w='100%' mt='10px' variant='filled' loading={isPending}>Send Code</Button>
+    </form>
+  )
+}
+
+export default PhonePrompt;