auth-7

1"use client";
2 
3import { ArrowRight, ExternalLink, InboxIcon } from "lucide-react";
4import { Plus } from "@/components/plus";
5import { Button } from "@/components/ui/button";
6 
7export function CheckEmailBlock() {
8  return (
9    <div className="group relative w-full max-w-md overflow-hidden rounded-2xl border bg-background p-8 shadow-lg">
10      <Plus className="-top-px -left-px" />
11      <Plus className="-top-px -right-px rotate-90" />
12      <Plus className="-bottom-px -left-px -rotate-90" />
13      <Plus className="-bottom-px -right-px rotate-180" />
14 
15      <div className="flex flex-col items-center gap-6 text-center">
16        <div className="relative">
17          <div className="flex size-16 rotate-3 items-center justify-center rounded-2xl bg-primary/5 transition-transform group-hover:rotate-6">
18            <InboxIcon className="size-8 text-primary/60" />
19          </div>
20          <div className="-top-1 -right-1 absolute size-4 animate-pulse rounded-full border-2 border-background bg-primary" />
21        </div>
22 
23        <div className="space-y-2">
24          <h2 className="font-bold text-2xl tracking-tight">
25            Check your Email
26          </h2>
27          <p className="text-muted-foreground text-sm">
28            We&apos;ve sent a password reset link to <br />
29            <span className="font-semibold text-foreground">
30              john@example.com
31            </span>
32          </p>
33        </div>
34 
35        <div className="w-full space-y-3">
36          <Button
37            className="h-11 w-full font-semibold shadow-sm transition-all active:scale-[0.98]"
38            type="button"
39          >
40            Open Email Client
41            <ExternalLink className="ml-2 size-4 opacity-50" />
42          </Button>
43 
44          <p className="text-muted-foreground text-xs">
45            Didn&apos;t receive the email? <br />
46            <button
47              className="mt-1 font-medium text-primary hover:underline"
48              type="button"
49            >
50              Click to resend
51            </button>
52          </p>
53        </div>
54 
55        <a
56          className="flex items-center gap-2 font-medium text-muted-foreground text-xs transition-colors hover:text-primary"
57          href="#"
58        >
59          Back to Sign In
60          <ArrowRight className="size-3" />
61        </a>
62      </div>
63    </div>
64  );
65}