Banner

"use client";

import { Banner } from "@/ui";

const messages = [
  {
    key: "release",
    content: "🎉 Litefy v2.0 is out — new Context Menu, Wizard and Banner components",
  },
  {
    key: "docs",
    content: "📚 New composition guides: Combobox, Multi Select, Date Picker",
  },
  {
    key: "theme",
    content: "🎨 12 brand themes with automatic surface tuning",
  },
];

export default function BannerBasicDemo() {
  return (
    <div className="w-full max-w-md overflow-hidden rounded-md">
      <Banner
        items={messages}
        speed={20}
        classNames={{ item: "gap-2 px-8 py-2 text-sm whitespace-nowrap" }}
      />
    </div>
  );
}

"use client";

import { Megaphone, Sparkles, Zap } from "lucide-react";
import { BannerItem, BannerTrack, BannerViewport } from "@/ui";

const messages = [
  { icon: Megaphone, text: "Server maintenance Sunday 02:00 UTC" },
  { icon: Sparkles, text: "Banner component just landed" },
  { icon: Zap, text: "Anchor positioning powers every popover" },
];

export default function BannerCustomDemo() {
  return (
    <div className="w-full max-w-md rounded-md">
      <BannerViewport
        className="py-2 bg-primary text-primary-foreground"
        aria-label="Announcements"
      >
        <BannerTrack duration={12} direction="right" playing>
          {[0, 1].map((copy) => (
            <div
              key={copy}
              aria-hidden={copy > 0 || undefined}
              className="flex shrink-0 items-center"
            >
              {messages.map(({ icon: Icon, text }) => (
                <BannerItem key={text} className="gap-2 px-6 text-sm">
                  <Icon className="size-3.5 text-primary" />
                  <span className="whitespace-nowrap">{text}</span>
                </BannerItem>
              ))}
            </div>
          ))}
        </BannerTrack>
      </BannerViewport>
    </div>
  );
}