With actions

1'use client'
2 
3import { useState } from 'react'
4import { ArrowUpCircle, X } from 'lucide-react'
5 
6import { Button } from '@/components/ui/button'
7 
8export function Banner04() {
9  const [open, setOpen] = useState(true)
10 
11  if (!open) {
12    return (
13      <button
14        type="button"
15        onClick={() => setOpen(true)}
16        className="text-muted-foreground hover:text-foreground text-sm underline-offset-4 hover:underline"
17      >
18        Show banner again
19      </button>
20    )
21  }
22 
23  return (
24    <div className="flex w-full flex-col gap-3 rounded-lg border bg-card px-4 py-3.5 shadow-sm sm:flex-row sm:items-center">
25      <span className="bg-primary/10 text-primary flex size-9 shrink-0 items-center justify-center rounded-full">
26        <ArrowUpCircle className="size-5" />
27      </span>
28      <div className="flex flex-1 flex-col gap-0.5">
29        <p className="text-sm font-medium">Update available — v2.4.0</p>
30        <p className="text-muted-foreground text-sm">
31          Restart the app to install the latest improvements and fixes.
32        </p>
33      </div>
34      <div className="flex shrink-0 items-center gap-2">
35        <Button
36          variant="ghost"
37          size="sm"
38          onClick={() => setOpen(false)}
39          className="text-muted-foreground"
40        >
41          Later
42        </Button>
43        <Button size="sm">Update now</Button>
44      </div>
45    </div>
46  )
47}