8-bit Login Form with Image

1import { cn } from "@/lib/utils";
2 
3import { Button } from "@/components/ui/8bit/button";
4import { Card, CardContent } from "@/components/ui/8bit/card";
5import { Input } from "@/components/ui/8bit/input";
6import { Label } from "@/components/ui/8bit/label";
7 
8import "@/components/ui/8bit/styles/retro.css";
9 
10export function LoginForm({
11  className,
12  ...props
13}: React.ComponentProps<"div">) {
14  return (
15    <div className={cn("flex flex-col gap-6", className)} {...props}>
16      <Card className="p-5">
17        <CardContent className="grid p-0 md:grid-cols-2">
18          <form className="p-6 md:p-8">
19            <div className="flex flex-col gap-6">
20              <div className="flex flex-col items-center text-center">
21                <h1 className="text-xl font-bold">Welcome back</h1>
22                <p className="text-balance text-xs text-muted-foreground">
23                  Login to your Acme Inc account
24                </p>
25              </div>
26              <div className="grid gap-2">
27                <Label htmlFor="email">Email</Label>
28                <Input
29                  id="email"
30                  type="email"
31                  placeholder="m@example.com"
32                  required
33                />
34              </div>
35              <div className="grid gap-2">
36                <div className="flex items-center">
37                  <Label htmlFor="password">Password</Label>
38                  <a
39                    href="#"
40                    className="ml-auto text-xs underline-offset-2 hover:underline"
41                  >
42                    Forgot password?
43                  </a>
44                </div>
45                <Input id="password" type="password" required />
46              </div>
47              <Button type="submit" className="w-full">
48                Login
49              </Button>
50              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
51                <span className="relative z-10 bg-background px-2 text-muted-foreground">
52                  Or continue with
53                </span>
54              </div>
55              <div className="grid grid-cols-3 gap-4">
56                <Button variant="outline" className="w-full">
57                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
58                    <path
59// … truncated