Dismissible

1'use client'
2 
3import { useState } from 'react'
4import { Sparkles, X } from 'lucide-react'
5 
6import { Button } from '@/components/ui/button'
7 
8export function Banner03() {
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="relative flex w-full items-center gap-3 rounded-lg border bg-card px-4 py-3 pr-12 text-sm shadow-sm">
25      <span className="bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-full">
26        <Sparkles className="size-4" />
27      </span>
28      <p className="text-muted-foreground">
29        <span className="text-foreground font-medium">What&apos;s new.</span>{' '}
30        We&apos;ve refreshed the editor with faster autosave.
31      </p>
32      <Button
33        variant="ghost"
34        size="icon-sm"
35        onClick={() => setOpen(false)}
36        aria-label="Dismiss banner"
37        className="text-muted-foreground absolute top-1/2 right-2 -translate-y-1/2"
38      >
39        <X />
40      </Button>
41    </div>
42  )
43}