Clerk Sign Up

1"use client";
2 
3import { useRouter } from "next/navigation";
4import type * as React from "react";
5import { useCallback, useRef, useState } from "react";
6 
7import { useClerk, useSignUp } from "@clerk/nextjs";
8 
9function cn(...classes: (string | boolean | undefined)[]) {
10  return classes.filter(Boolean).join(" ");
11}
12 
13function EyeIcon({ className }: { className?: string }) {
14  return (
15    <svg
16      aria-hidden="true"
17      className={className}
18      xmlns="http://www.w3.org/2000/svg"
19      width="16"
20      height="16"
21      viewBox="0 0 24 24"
22      fill="none"
23      stroke="currentColor"
24      strokeWidth="2"
25      strokeLinecap="round"
26      strokeLinejoin="round"
27    >
28      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
29      <circle cx="12" cy="12" r="3" />
30    </svg>
31  );
32}
33 
34function EyeOffIcon({ className }: { className?: string }) {
35  return (
36    <svg
37      aria-hidden="true"
38      className={className}
39      xmlns="http://www.w3.org/2000/svg"
40      width="16"
41      height="16"
42      viewBox="0 0 24 24"
43      fill="none"
44      stroke="currentColor"
45      strokeWidth="2"
46      strokeLinecap="round"
47      strokeLinejoin="round"
48    >
49      <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
50      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
51      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
52      <path d="m2 2 20 20" />
53    </svg>
54  );
55}
56 
57function CheckIcon({ className }: { className?: string }) {
58  return (
59    <svg
60      aria-hidden="true"
61      className={className}
62      xmlns="http://www.w3.org/2000/svg"
63      width="14"
64      height="14"
65      viewBox="0 0 24 24"
66      fill="none"
67      stroke="currentColor"
68      strokeWidth="2.5"
69      strokeLinecap="round"
70      strokeLinejoin="round"
71    >
72      <polyline points="20 6 9 17 4 12" />
73    </svg>
74  );
75}
76 
77function GoogleIcon({ className }: { className?: string }) {
78  return (
79    <svg
80      aria-hidden="true"
81      className={className}
82      xmlns="http://www.w3.org/2000/svg"
83      width="18"
84      height="18"
85      viewBox="0 0 24 24"
86    >
87      <path
88        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
89        fill="#4285F4"
90      />
91      <path
92// … truncated