banner-2

1---
2import { cn } from "@/lib/utils"
3import { Banner, BannerContainer } from "@/components/ui/banner"
4import { Button } from "@/components/ui/button"
5 
6type Props = {
7  class?: string
8  title: string
9  description: string
10  buttons?: {
11    label: string
12    href: string
13    variant?: "default" | "outline" | "secondary" | "ghost"
14  }[]
15}
16 
17const { class: className, title, description, buttons } = Astro.props
18---
19 
20<Banner variant="floating" storageKey="banner-2" class={cn("", className)}>
21  <BannerContainer class="gap-4 py-1" showClose={false}>
22    <div
23      class="flex flex-1 flex-col gap-0.5 lg:flex-row lg:items-center lg:gap-x-4"
24    >
25      <p class="text-sm font-semibold">{title}</p>
26      <p class="text-muted-foreground text-sm">{description}</p>
27    </div>
28    {
29      buttons?.length && (
30        <div class="flex shrink-0 items-center gap-2">
31          {buttons.map(({ href, label, ...button }, index) => (
32            <Button
33              as="a"
34              href={href}
35              size="sm"
36              variant={button.variant ?? (index === 0 ? "default" : "outline")}
37              {...button}
38            >
39              {label}
40            </Button>
41          ))}
42        </div>
43      )
44    }
45  </BannerContainer>
46</Banner>