Alert 2

1import { Alert } from "@/components/ui/alert";
2import { Button } from "@/components/ui/button";
3import { cn } from "@/lib/utils";
4import { Check, X } from "lucide-react";
5import Image from "next/image";
6 
7export default function Alert02() {
8  return (
9    <div className="w-full max-w-xl mx-auto">
10      <Alert className="relative bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 shadow-[0_1px_6px_0_rgba(0,0,0,0.02)] rounded-xl p-4">
11        <div className="flex items-center gap-4">
12          <div className="relative h-10 w-10 shrink-0">
13            <Image
14              src="https://img.freepik.com/premium-photo/anime-male-avatar_950633-956.jpg"
15              alt="Arihant jain"
16              fill
17              className="rounded-full object-cover"
18            />
19            <div className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white dark:ring-zinc-950" />
20          </div>
21 
22          <div className="flex-1 min-w-0">
23            <div className="flex items-center justify-between gap-4">
24              <div>
25                <p className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
26                  Team Invitation
27                </p>
28                <p className="text-[13px] text-zinc-500 dark:text-zinc-400 mt-0.5">
29                  Arihant invited you to join{" "}
30                  <span className="font-medium text-zinc-700 dark:text-zinc-300">
31                    Design Team
32                  </span>
33                </p>
34              </div>
35            </div>
36          </div>
37 
38          {/* Actions */}
39          <div className="flex items-center gap-2">
40            <Button
41              size="sm"
42              variant="ghost"
43              className="h-8 w-8 p-0 hover:bg-red-50 dark:hover:bg-red-950/50 text-zinc-400 hover:text-red-600 dark:text-zinc-500 dark:hover:text-red-400 transition-colors"
44              aria-label="Decline invitation"
45            >
46              <X className="h-4 w-4" />
47            </Button>
48            <Button
49              size="sm"
50              variant="ghost"
51              className={cn(
52                "h-8 w-8 p-0",
53                "hover:bg-emerald-50 dark:hover:bg-emerald-950/50",
54                "text-zinc-400 hover:text-emerald-600",
55                "dark:text-zinc-500 dark:hover:text-emerald-400",
56                "transition-colors",
57              )}
58              aria-label="Accept invitation"
59            >
60              <Check className="h-4 w-4" />
61// … truncated