Banner 01

1import { ArrowUpRight } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Button } from "@/components/ui/button";
4 
5interface Banner01Props {
6  title?: string;
7  description?: string;
8  button?: {
9    text: string;
10    url?: string;
11    icon?: React.ReactNode;
12    variant?: "default" | "outline" | "ghost" | "secondary" | "link";
13  };
14  className?: string;
15}
16 
17const Banner01 = ({
18  title = "Shadcn 2026",
19  description = "Join us in Paris from June 20 - 24 to see what's coming next.",
20  button = {
21    text: "Register now",
22    url: "#",
23    variant: "outline",
24    icon: (
25      <ArrowUpRight className="size-4 transition-transform group-hover:translate-x-0.5" />
26    ),
27  },
28  className,
29}: Banner01Props) => {
30  return (
31    <div className={cn("fixed top-0 w-full border-b bg-background", className)}>
32      <div className="container mx-auto flex flex-col items-center justify-between gap-2 px-4 py-3 md:flex-row md:gap-4 md:px-6">
33        <p className="flex-col text-sm">
34          <span className="font-semibold">{title}</span>
35          <span className="mx-2 text-muted-foreground">·</span>
36          <span className="text-muted-foreground">{description}</span>
37        </p>
38        {button && (
39          <Button
40            key={button.text}
41            variant={button.variant ?? "default"}
42            asChild
43          >
44            <a
45              href={button.url}
46              className="group flex w-full shrink-0 items-center gap-1 text-sm font-medium md:w-fit"
47            >
48              {button.text}
49              {button.icon}
50            </a>
51          </Button>
52        )}
53      </div>
54    </div>
55  );
56};
57 
58export default Banner01;