"use client"; import { ArrowLeft, KeyRound } from "lucide-react"; import Link from "next/link"; import { useId } from "react"; import { Button } from "@/components/ui/button"; import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; interface Auth4Props { icon?: React.ReactNode; heading?: string; description?: string; backLink?: { label: string; href: string; }; labels?: { email?: string; emailPlaceholder?: string; submit?: string; }; className?: string; } export const auth4Demo: Auth4Props = { icon: , heading: "Forgot your password?", description: "Enter the email linked to your account and we'll send you a link to reset your password.", backLink: { label: "Back to sign in", href: "https://beste.co", }, labels: { email: "Email", emailPlaceholder: "you@example.com", submit: "Send reset link", }, }; export function Auth4({ icon, heading, description, backLink, labels = {}, className, }: Auth4Props) { const fieldId = useId(); const { email: emailLabel, emailPlaceholder, submit: submitLabel } = labels; return (

{icon && (

{icon}

)} {heading && (

{heading}

)} {description && (

{description}

)}

{backLink && (

{backLink.label}

)}

); }

Auth - Forgot Password Blocks

Select an Item to view its code