Sign-in Forms

"use client";

import type React from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import Link from "next/link";
import { GithubIcon, TwitterIcon } from "lucide-react";
import { Divider } from "@/components/ui/divider";

const formSchema = z.object({
  email: z.email(),
  password: z.string().min(8, { message: "Password must be at least 8 characters" })
});

export default function LoginForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: ""
    }
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values);
  }

  return (
    <div className="grid min-h-screen w-full items-center justify-center lg:grid-cols-2">
      <div className="mx-auto flex w-full max-w-sm flex-col items-center gap-8">
        {/* Logo */}
        <div className="flex h-16 w-16 items-center justify-center">
          <img src="/logo.svg" className="size-10" alt="" />
        </div>
        {/* Heading */}
        <h1 className="font-heading text-center text-3xl">Sign in to your account</h1>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input type="email" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="flex justify-between">
                    Password{" "}
                    <Link href="#" className="text-muted-foreground text-sm underline">
                      Forgot password?
                    </Link>
                  </FormLabel>

                  <FormControl>
                    <Input type="password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full">
              Sign in
            </Button>
          </form>
        </Form>
        <p className="text-muted-foreground text-sm">
          Not a member?{" "}
          <Link href="#" className="underline">
            Start a 14 day free trial
          </Link>
        </p>

        <Divider>or continue with</Divider>

        <div className="mt-6 grid w-full grid-cols-3 gap-3">
          <Button variant="outline">
            <GithubIcon />
            <span className="sr-only">GitHub</span>
          </Button>
          <Button variant="outline">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              width="24"
              height="24">
              <path d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z"></path>
            </svg>
            <span className="sr-only">Google</span>
          </Button>
          <Button variant="outline">
            <TwitterIcon />
            <span className="sr-only">Twitter</span>
          </Button>
        </div>
      </div>
      <figure className="relative hidden h-full bg-red-400 lg:block">
        <img
          src="https://images.unsplash.com/photo-1755593574938-6d66d28f8e57?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1080"
          className="absolute inset-0 h-full w-full object-cover"
          alt="login cover"
        />
      </figure>
    </div>
  );
}