126 lines
3.9 KiB
TypeScript
126 lines
3.9 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Signup6Props {
|
|
className?: string;
|
|
logo: {
|
|
url: string;
|
|
src: string;
|
|
alt: string;
|
|
title?: string;
|
|
};
|
|
buttonText?: string;
|
|
googleText?: string;
|
|
googleIconAlt?: string;
|
|
emailLabel?: string;
|
|
passwordLabel?: string;
|
|
confirmPasswordLabel?: string;
|
|
emailPlaceholder?: string;
|
|
passwordPlaceholder?: string;
|
|
confirmPasswordPlaceholder?: string;
|
|
signupText?: string;
|
|
signupUrl?: string;
|
|
loginLinkText?: string;
|
|
}
|
|
|
|
const Signup6 = ({
|
|
className,
|
|
logo = {
|
|
url: "https://www.ShadcnBlocks",
|
|
src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.svg",
|
|
alt: "نام تجاری",
|
|
title: "نوافروش",
|
|
},
|
|
buttonText = "شروع رایگان",
|
|
googleText = "ادامه با گوگل",
|
|
googleIconAlt = "گوگل",
|
|
emailLabel = "ایمیل",
|
|
passwordLabel = "رمز عبور",
|
|
confirmPasswordLabel = "تکرار رمز عبور",
|
|
emailPlaceholder = "ایمیل",
|
|
passwordPlaceholder = "رمز عبور (حداقل ۸ کاراکتر)",
|
|
confirmPasswordPlaceholder = "تأیید رمز عبور",
|
|
signupText = "قبلاً ثبتنام کردهاید؟",
|
|
signupUrl = "https://ShadcnBlocks",
|
|
loginLinkText = "ورود به حساب",
|
|
}: Signup6Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("h-screen bg-background", className)}
|
|
>
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="flex flex-col items-center gap-6 lg:justify-start">
|
|
<a href={logo.url}>
|
|
<img
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
title={logo.title}
|
|
className="h-10 dark:invert"
|
|
/>
|
|
</a>
|
|
<div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-lg border px-6 py-12">
|
|
<Button type="button" className="w-full">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/logos/google-icon.svg"
|
|
className="ms-2 size-4"
|
|
alt={googleIconAlt}
|
|
/>
|
|
{googleText}
|
|
</Button>
|
|
|
|
<div className="relative flex w-full items-center justify-center py-6">
|
|
<div className="absolute h-px w-full border-t border-border"></div>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col gap-2">
|
|
<Label>{emailLabel}</Label>
|
|
<Input
|
|
type="email"
|
|
placeholder={emailPlaceholder}
|
|
className="bg-background text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2">
|
|
<Label>{passwordLabel}</Label>
|
|
<Input
|
|
type="password"
|
|
placeholder={passwordPlaceholder}
|
|
className="bg-background text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2">
|
|
<Label>{confirmPasswordLabel}</Label>
|
|
<Input
|
|
type="password"
|
|
placeholder={confirmPasswordPlaceholder}
|
|
className="bg-background text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full" variant="secondary">
|
|
{buttonText}
|
|
</Button>
|
|
</div>
|
|
<div className="flex justify-center gap-1 text-sm text-muted-foreground">
|
|
<p>{signupText}</p>
|
|
<a
|
|
href={signupUrl}
|
|
className="font-medium text-primary hover:underline"
|
|
>
|
|
{loginLinkText}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Signup6 };
|