52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { ArrowRight, Sparkles, X } from "lucide-react";
|
|
|
|
type LovartPromoBannerProps = {
|
|
actionText?: string | null;
|
|
link?: string | null;
|
|
onAction: () => void;
|
|
onDismiss: () => void;
|
|
text: string;
|
|
};
|
|
|
|
export const LOVART_PROMO_BANNER_HEIGHT = 45;
|
|
|
|
export function LovartPromoBanner({
|
|
actionText,
|
|
link,
|
|
onAction,
|
|
onDismiss,
|
|
text,
|
|
}: LovartPromoBannerProps) {
|
|
const showAction = Boolean(link?.trim() && actionText?.trim());
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 top-0 z-[120] h-[45px] bg-[#ddff58] text-[#11130d]">
|
|
<div className="mx-auto flex h-full max-w-[1440px] items-center justify-center gap-3 px-11 sm:px-12">
|
|
<Sparkles className="hidden h-4 w-4 shrink-0 sm:block" />
|
|
<p className="min-w-0 truncate text-center text-[13px] font-normal sm:text-[15px]">
|
|
{text}
|
|
</p>
|
|
{showAction ? (
|
|
<button
|
|
className="inline-flex h-8 max-w-[42%] shrink-0 items-center gap-1 px-1 text-[13px] font-medium underline decoration-1 underline-offset-4 transition-opacity hover:opacity-65 sm:max-w-none sm:text-[15px]"
|
|
onClick={onAction}
|
|
type="button"
|
|
>
|
|
<span className="truncate">{actionText}</span>
|
|
<ArrowRight className="h-3.5 w-3.5" />
|
|
</button>
|
|
) : null}
|
|
<button
|
|
aria-label="关闭首页广告"
|
|
className="absolute right-2 flex h-8 w-8 items-center justify-center text-black/65 transition hover:text-black sm:right-4"
|
|
onClick={onDismiss}
|
|
title="关闭"
|
|
type="button"
|
|
>
|
|
<X className="h-[18px] w-[18px]" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|