banner-1

1---
2import { cn } from "@/lib/utils"
3import { Banner, BannerContainer } from "@/components/ui/banner"
4import { Icon } from "@/components/ui/icon"
5 
6type Props = {
7  class?: string
8  title: string
9  description: string
10  link?: {
11    label: string
12    href: string
13  }
14}
15 
16const { class: className, title, description, link } = Astro.props
17---
18 
19<Banner
20  storageKey="banner-1"
21  class={cn("dark bg-background text-foreground", className)}
22>
23  <BannerContainer class="flex-row items-center gap-x-4 gap-y-1">
24    <p class="text-sm leading-relaxed">
25      <span class="font-semibold">{title}</span>
26      <span class="mx-1.5 hidden opacity-50 sm:inline">&mdash;</span>
27      <span class="opacity-80">{description}</span>
28    </p>
29    {
30      link && (
31        <a
32          href={link.href}
33          class="group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80"
34        >
35          {link.label}
36          <Icon
37            name="arrow-right"
38            class="size-3.5 transition-transform group-hover/link:translate-x-0.5"
39          />
40        </a>
41      )
42    }
43  </BannerContainer>
44</Banner>