Forgot Password

1"use client";
2 
3import { ArrowLeft } from "@phosphor-icons/react";
4import { Button } from "@/components/ui/button";
5import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8 
9export function ForgotPasswordBlock() {
10  return (
11    <div className="flex items-center justify-center min-h-screen p-6">
12      <Card className="w-full max-w-md text-foreground">
13        <CardHeader className="space-y-1">
14          <CardTitle className="text-2xl text-foreground">Forgot password?</CardTitle>
15          <CardDescription className="text-muted-foreground">
16            Enter your email address and we&apos;ll send you a link to reset your password
17          </CardDescription>
18        </CardHeader>
19        <CardContent className="space-y-4">
20          <div className="space-y-2">
21            <Label htmlFor="email" className="text-foreground">
22              Email
23            </Label>
24            <Input id="email" type="email" placeholder="name@example.com" className="text-foreground placeholder:text-muted-foreground" />
25          </div>
26          <Button className="w-full text-foreground">Send Reset Link</Button>
27          <Button variant="link" className="w-full text-muted-foreground" asChild>
28            <a href="/authentication">
29              <ArrowLeft className="mr-2 h-4 w-4" />
30              Back to sign in
31            </a>
32          </Button>
33        </CardContent>
34      </Card>
35    </div>
36  );
37}