ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
106 lines
4.3 KiB
TypeScript
106 lines
4.3 KiB
TypeScript
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
import { type } from "@/lib/typography";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Field,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldSeparator,
|
|
} from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
export function LoginForm({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
return (
|
|
<div className={cn("flex flex-col gap-4 sm:gap-6", className)} {...props}>
|
|
<Card className="overflow-hidden p-0">
|
|
<CardContent className="grid p-0 md:grid-cols-2">
|
|
<form className="p-4 sm:p-6 md:p-8">
|
|
<FieldGroup className="gap-4 sm:gap-6">
|
|
<div className="flex flex-col items-center gap-2 text-center">
|
|
<h1 className={cn(type.h2, "text-center")}>خوش آمدید</h1>
|
|
<p className={cn(type["body-sm"], "text-muted-foreground text-balance text-center md:text-base")}>
|
|
به حساب کاربری خود وارد شوید
|
|
</p>
|
|
</div>
|
|
<Field>
|
|
<FieldLabel htmlFor="email" className={type.label}>
|
|
ایمیل
|
|
</FieldLabel>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="name@example.com"
|
|
className="h-10 sm:h-11"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-0">
|
|
<FieldLabel
|
|
htmlFor="password"
|
|
className={type.label}
|
|
>
|
|
رمز عبور
|
|
</FieldLabel>
|
|
<Link
|
|
href="#"
|
|
className={cn(type.caption, "sm:ms-auto underline-offset-2 hover:underline")}
|
|
>
|
|
رمز عبور را فراموش کردهاید؟
|
|
</Link>
|
|
</div>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
className="h-10 sm:h-11"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<Button type="submit" size="lg" className="w-full">
|
|
ورود
|
|
</Button>
|
|
</Field>
|
|
<FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
|
|
یا ادامه با
|
|
</FieldSeparator>
|
|
<Field className="">
|
|
<Button variant="secondary" type="button" size="lg" className="w-full">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
className="size-[var(--btn-icon-size)]"
|
|
>
|
|
<path
|
|
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
<span className="">ورود با گوگل</span>
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
<div className="bg-muted relative hidden md:block">
|
|
<img
|
|
src="/placeholder.svg"
|
|
alt="تصویر ورود به حساب کاربری"
|
|
className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<FieldDescription className={cn(type.caption, "px-4 sm:px-6 text-center")}>
|
|
با کلیک روی ادامه، شما با <Link href="#" className="underline-offset-2 hover:underline">شرایط استفاده</Link> و{" "}
|
|
<Link href="#" className="underline-offset-2 hover:underline">سیاست حریم خصوصی</Link> ما موافقت میکنید.
|
|
</FieldDescription>
|
|
</div>
|
|
);
|
|
}
|