import { ChevronLeft, Copy, Mail, PlusIcon } 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"; 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 socialProviders = { apple: { Icon: () => ( ), }, dropbox: { Icon: () => ( ), }, discord: { Icon: () => ( ), }, facebook: { Icon: () => ( ), }, github: { Icon: () => ( ), }, gitlab: { Icon: () => ( ), }, google: { Icon: () => ( ), }, linkedin: { Icon: () => ( ), }, microsoft: { Icon: () => ( ), }, twitch: { Icon: () => ( ), }, spotify: { Icon: () => ( ), }, x: { Icon: () => ( ), }, }; const [currentStep, setCurrentStep] = useState(0); return ( Create Sign in Box Configure the sign in box to your liking and copy the code to your application
, }, { title: "Sign Up", value: "sign-up", content: , }, ]} />
{currentStep === 0 ? ( Configuration
{Object.entries(socialProviders).map( ([provider, { Icon }]) => (
), )}
) : currentStep === 1 ? ( Choose Framework {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

To use the sign in box in your application, copy the code below and paste it in your application.

)}
); }