Alert With Actions

1"use client";
2 
3import { CircleFadingArrowUpIcon, XIcon } from "lucide-react";
4import { useState } from "react";
5import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
6import { Button } from "@/registry/ui/button";
7 
8export default function AlertWithActionsDemo() {
9  const [isAlertVisible, setIsAlertVisible] = useState(true);
10 
11  const showAlert = () => {
12    setIsAlertVisible(true);
13  };
14  const hideAlert = () => {
15    setIsAlertVisible(false);
16  };
17 
18  return (
19    <div className="w-full">
20      {isAlertVisible && (
21        <Alert className="flex items-center justify-between pr-2 [&>svg+div]:translate-y-0">
22          <div className="flex items-start gap-3">
23            <CircleFadingArrowUpIcon className="mt-0.5 size-4" />
24            <div className="flex-col justify-center">
25              <AlertTitle>Update Available</AlertTitle>
26              <AlertDescription>
27                A new version of the app is now available.
28              </AlertDescription>
29            </div>
30          </div>
31          <Button
32            className="pl-0!"
33            onClick={hideAlert}
34            size="icon"
35            variant="ghost"
36          >
37            <XIcon className="h-5 w-5" />
38          </Button>
39        </Alert>
40      )}
41      {!isAlertVisible && (
42        <div className="flex justify-center">
43          <Button className="mx-auto mt-2" onClick={showAlert}>
44            Reopen
45          </Button>
46        </div>
47      )}
48    </div>
49  );
50}