"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

type CtaAction = {
  label: string
  href?: string
  onClick?: React.MouseEventHandler<HTMLButtonElement>
}

interface CtaBannerProps extends React.HTMLAttributes<HTMLDivElement> {
  heading: string
  subtext: string
  primaryAction: CtaAction
  secondaryAction?: CtaAction
}

function ActionButton({
  action,
  variant,
}: {
  action: CtaAction
  variant: "primary" | "secondary"
}) {
  const className = cn(
    "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-semibold transition",
    variant === "primary"
      ? "bg-accent text-accent-foreground"
      : "border border-border bg-background text-foreground"
  )

  if (action.href) {
    return (
      <a href={action.href} className={className}>
        {action.label}
      </a>
    )
  }

  return (
    <button type="button" onClick={action.onClick} className={className}>
      {action.label}
    </button>
  )
}

const CtaBanner = React.forwardRef<HTMLDivElement, CtaBannerProps>(
  (
    { className, heading, subtext, primaryAction, secondaryAction, ...props },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col gap-6 rounded-2xl border border-border bg-card px-6 py-8 md:flex-row md:items-center md:justify-between",
          className
        )}
        {...props}
      >
        <div className="space-y-2">
          <h2 className="text-2xl font-semibold text-foreground">{heading}</h2>
          <p className="text-sm text-muted-foreground">{subtext}</p>
        </div>

        <div className="flex flex-wrap gap-3">
          <ActionButton action={primaryAction} variant="primary" />
          {secondaryAction ? (
            <ActionButton action={secondaryAction} variant="secondary" />
          ) : null}
        </div>
      </div>
    )
  }
)
CtaBanner.displayName = "CtaBanner"

export { CtaBanner }
CTA Banner

Launch your next product faster

Dependencies

Files

Installation
