92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Login1Props {
|
|
heading?: string;
|
|
logo: {
|
|
url: string;
|
|
src: string;
|
|
alt: string;
|
|
title?: string;
|
|
className?: string;
|
|
};
|
|
buttonText?: string;
|
|
emailPlaceholder?: string;
|
|
passwordPlaceholder?: string;
|
|
googleText?: string;
|
|
signupText?: string;
|
|
signupLinkText?: string;
|
|
signupUrl?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const Login1 = ({
|
|
heading = "ورود",
|
|
logo = {
|
|
url: "https://www.ShadcnBlocks",
|
|
src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
|
|
alt: "لوگو",
|
|
title: "نام برند",
|
|
},
|
|
buttonText = "ورود",
|
|
emailPlaceholder = "آدرس ایمیل",
|
|
passwordPlaceholder = "رمز عبور",
|
|
signupText = "حساب کاربری ندارید؟",
|
|
signupLinkText = "ایجاد حساب",
|
|
signupUrl = "/#",
|
|
className,
|
|
}: Login1Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("bg-muted", className)}
|
|
>
|
|
<div className="flex items-center justify-center px-4 py-16 sm:px-6 sm:py-24">
|
|
<div className="flex w-full max-w-sm flex-col items-center gap-6">
|
|
<a href={logo.url} className="shrink-0">
|
|
<img
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
title={logo.title}
|
|
className="h-8 w-auto max-w-[12rem] dark:invert sm:h-10 sm:max-w-none"
|
|
/>
|
|
</a>
|
|
<div className="flex w-full flex-col items-center gap-y-4 rounded-md border border-muted bg-background px-4 py-6 text-start shadow-md sm:px-6 sm:py-8">
|
|
{heading && <h1 className="w-full text-xl font-semibold">{heading}</h1>}
|
|
<Input
|
|
type="email"
|
|
placeholder={emailPlaceholder}
|
|
className="text-start text-sm"
|
|
dir="rtl"
|
|
required
|
|
/>
|
|
<Input
|
|
type="password"
|
|
placeholder={passwordPlaceholder}
|
|
className="text-start text-sm"
|
|
dir="rtl"
|
|
required
|
|
/>
|
|
<Button type="submit" className="w-full">
|
|
{buttonText}
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-center gap-x-1 gap-y-1 text-center text-sm text-muted-foreground">
|
|
<p>{signupText}</p>
|
|
<a
|
|
href={signupUrl}
|
|
className="font-medium text-primary hover:underline"
|
|
>
|
|
{signupLinkText}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Login1 };
|