Clerk Waitlist

1"use client";
2 
3import * as React from "react";
4 
5import { useWaitlist } from "@clerk/nextjs";
6 
7function cn(...classes: (string | boolean | undefined)[]) {
8  return classes.filter(Boolean).join(" ");
9}
10 
11function CheckIcon({ className }: { className?: string }) {
12  return (
13    <svg
14      aria-hidden="true"
15      xmlns="http://www.w3.org/2000/svg"
16      viewBox="0 0 24 24"
17      fill="none"
18      stroke="currentColor"
19      strokeWidth={2}
20      strokeLinecap="round"
21      strokeLinejoin="round"
22      className={className}
23    >
24      <path d="M20 6 9 17l-5-5" />
25    </svg>
26  );
27}
28 
29function ArrowRightIcon({ className }: { className?: string }) {
30  return (
31    <svg
32      aria-hidden="true"
33      xmlns="http://www.w3.org/2000/svg"
34      viewBox="0 0 24 24"
35      fill="none"
36      stroke="currentColor"
37      strokeWidth={2}
38      strokeLinecap="round"
39      strokeLinejoin="round"
40      className={className}
41    >
42      <path d="M5 12h14" />
43      <path d="m12 5 7 7-7 7" />
44    </svg>
45  );
46}
47 
48function MailIcon({ className }: { className?: string }) {
49  return (
50    <svg
51      aria-hidden="true"
52      xmlns="http://www.w3.org/2000/svg"
53      viewBox="0 0 24 24"
54      fill="none"
55      stroke="currentColor"
56      strokeWidth={2}
57      strokeLinecap="round"
58      strokeLinejoin="round"
59      className={className}
60    >
61      <rect width="20" height="16" x="2" y="4" rx="2" />
62      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
63    </svg>
64  );
65}
66 
67function LoaderIcon({ className }: { className?: string }) {
68  return (
69    <svg
70      aria-hidden="true"
71      xmlns="http://www.w3.org/2000/svg"
72      viewBox="0 0 24 24"
73      fill="none"
74      stroke="currentColor"
75      strokeWidth={2}
76      strokeLinecap="round"
77      strokeLinejoin="round"
78      className={className}
79    >
80      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
81    </svg>
82  );
83}
84 
85export interface ClerkWaitlistProps {
86  className?: string;
87  heading?: string;
88  description?: string;
89  ctaText?: string;
90  successMessage?: string;
91}
92 
93export function ClerkWaitlist({
94  className,
95  heading = "Get early access",
96  description = "Join the waitlist to be the first to know when we launch.",
97  ctaText = "Join waitlist",
98  successMessage = "You're on the list!",
99}: ClerkWaitlistProps) {
100  const { waitlist, fetchStatus } = useWaitlist();
101  const [email, setEmail] = React.useState("");
102  const [submitted, setSubmitted] = React.useState(false);
103  const [error, setError] = React.useState<string | null>(null);
104 
105// … truncated