Banner

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6const bannerVariants = cva("w-full", {
7  variants: {
8    variant: {
9      default: "bg-muted text-foreground",
10      primary: "bg-primary text-primary-foreground",
11    },
12  },
13  defaultVariants: {
14    variant: "default",
15  },
16})
17 
18function Banner({
19  className,
20  variant,
21  ...props
22}: React.ComponentProps<"div"> & VariantProps<typeof bannerVariants>) {
23  return (
24    <div
25      data-slot="banner"
26      data-variant={variant ?? "default"}
27      className={cn(bannerVariants({ variant }), className)}
28      {...props}
29    />
30  )
31}
32 
33function BannerContent({ className, ...props }: React.ComponentProps<"div">) {
34  return (
35    <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
36      <div
37        data-slot="banner-content"
38        className={cn(
39          "flex items-center justify-between gap-x-6 p-4",
40          className
41        )}
42        {...props}
43      />
44    </div>
45  )
46}
47 
48export { Banner, BannerContent }