33 lines
1007 B
TypeScript
33 lines
1007 B
TypeScript
import { Link } from "react-router";
|
|
import { cn } from "@/editor/lib/utils";
|
|
|
|
export type BannerProps = {
|
|
text: string;
|
|
ctaLabel: string;
|
|
ctaHref: string;
|
|
tone: "default" | "inverse" | "muted";
|
|
};
|
|
|
|
export function Banner({ text, ctaLabel, ctaHref, tone }: BannerProps) {
|
|
const toneClass: Record<BannerProps["tone"], string> = {
|
|
default: "bg-foreground text-background",
|
|
inverse: "bg-background text-foreground border-y border-border",
|
|
muted: "bg-muted text-foreground border-y border-border",
|
|
};
|
|
return (
|
|
<div className={cn("w-full py-2 text-center text-xs tracking-[0.18em] uppercase", toneClass[tone])}>
|
|
<div className="container mx-auto flex flex-col items-center justify-center gap-2 px-6 sm:flex-row">
|
|
<span>{text}</span>
|
|
{ctaLabel ? (
|
|
<Link
|
|
to={ctaHref || "#"}
|
|
className="underline-offset-4 hover:underline"
|
|
>
|
|
{ctaLabel} →
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|