Alert

1"use client";
2 
3import { useState } from "react";
4import { CheckCircle2Icon, XIcon } from "lucide-react";
5 
6import { Alert, AlertTitle } from "@/components/ui/alert";
7import { Button } from "@/components/ui/button";
8 
9export default function AlertWithDismiss() {
10  const [show, setShow] = useState(true);
11 
12  if (!show) return null;
13 
14  return (
15    <Alert className="flex items-center justify-between">
16      <div className="flex gap-3">
17        <CheckCircle2Icon className="mt-0.5 size-4" />
18        <AlertTitle>Success! Your changes have been saved</AlertTitle>
19      </div>
20      <Button variant="ghost" size="icon-sm" onClick={() => setShow(false)}>
21        <XIcon />
22      </Button>
23    </Alert>
24  );
25}