import { Moon, PlusIcon, Sun } from "lucide-react"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "../ui/dialog"; import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "../ui/card"; import SignIn from "./sign-in"; import { SignUp } from "./sign-up"; import { AuthTabs } from "./tabs"; import { Label } from "../ui/label"; import { Switch } from "../ui/switch"; import { Separator } from "../ui/separator"; import { useState } from "react"; import CodeTabs from "./code-tabs"; import { cn } from "@/lib/utils"; import { socialProviders } from "./social-provider"; import { useAtom } from "jotai"; import { optionsAtom } from "./store"; import { useTheme } from "next-themes"; import { ScrollArea } from "../ui/scroll-area"; const frameworks = [ { title: "Next.js", description: "The React Framework for Production", Icon: () => ( ), }, { title: "Nuxt", description: "The Intuitive Vue Framework", Icon: () => ( ), }, { title: "Svelte Kit", description: "Web development for the rest of us", Icon: () => ( ), }, { title: "Solid Start", description: "Fine-grained reactivity goes fullstack", Icon: () => ( ), }, ]; export function Builder() { const [currentStep, setCurrentStep] = useState(0); const [options, setOptions] = useAtom(optionsAtom); const { setTheme, resolvedTheme } = useTheme(); return ( Create Sign in Box Configure the sign in box to your liking and copy the code to your application.
{options.signUp ? ( , }, { title: "Sign Up", value: "sign-up", content: , }, ]} /> ) : ( )}
{currentStep === 0 ? ( Configuration
{ if (resolvedTheme === "dark") { setTheme("light"); } else { setTheme("dark"); } }} > {resolvedTheme === "dark" ? ( setTheme("light")} size={18} /> ) : ( setTheme("dark")} size={18} /> )}
{ setOptions((prev) => ({ ...prev, email: checked, magicLink: checked ? false : prev.magicLink, signUp: checked, })); }} />
{ setOptions((prev) => ({ ...prev, rememberMe: checked, })); }} />
{ setOptions((prev) => ({ ...prev, forgetPassword: checked, })); }} />
{Object.entries(socialProviders).map( ([provider, { Icon }]) => (
{ setOptions((prev) => ({ ...prev, socialProviders: checked ? [...prev.socialProviders, provider] : prev.socialProviders.filter( (p) => p !== provider, ), })); }} />
), )}
{ setOptions((prev) => ({ ...prev, passkey: checked, })); }} />
{ setOptions((prev) => ({ ...prev, magicLink: checked, email: checked ? false : prev.email, signUp: checked ? false : prev.signUp, })); }} />
{ setOptions((prev) => ({ ...prev, label: checked, })); }} />
) : currentStep === 1 ? ( Choose Framework

{ setCurrentStep(0); }} > Go Back

{frameworks.map((fm) => (
{ if (fm.title === "Next.js") { setCurrentStep(currentStep + 1); } }} className={cn( "flex flex-col items-center gap-4 border p-6 rounded-md w-5/12 flex-grow h-44 relative", fm.title !== "Next.js" ? "opacity-55" : "hover:ring-1 transition-all ring-border hover:bg-background duration-200 ease-in-out cursor-pointer", )} key={fm.title} > {fm.title !== "Next.js" && ( Coming Soon )}

{fm.description}

))} ) : (
Code

Copy the code below and paste it in your application to get started.

{ setCurrentStep(0); }} > Go Back

)}
); }