mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
|
||
export type TvonePublicationBannerProps = {
|
||
/** When set, the whole slot links here (campaign URL). */
|
||
href?: string;
|
||
/** Optional creative — leaderboard-style wide image (e.g. 970×90 or similar). */
|
||
imageSrc?: string;
|
||
imageAlt?: string;
|
||
/** Short line shown when no image (placeholder for unsold inventory). */
|
||
title?: string;
|
||
subtitle?: string;
|
||
/** Small label above the slot (legal / transparency). */
|
||
slotLabel?: string;
|
||
};
|
||
|
||
export function TvonePublicationBanner({
|
||
href = "#publicidade",
|
||
imageSrc,
|
||
imageAlt = "Publicidade",
|
||
title = "Espaço publicitário",
|
||
subtitle = "Reserve este espaço para a sua marca. Contacte a nossa equipa comercial.",
|
||
slotLabel = "Publicidade",
|
||
}: TvonePublicationBannerProps) {
|
||
const inner = imageSrc ? (
|
||
<Image
|
||
src={imageSrc}
|
||
alt={imageAlt}
|
||
width={1200}
|
||
height={120}
|
||
className="h-auto w-full max-h-[120px] object-cover object-center md:max-h-[140px]"
|
||
sizes="100vw"
|
||
priority
|
||
/>
|
||
) : (
|
||
<div className="flex min-h-[88px] w-full flex-col items-center justify-center gap-1 bg-[#f0f0f3] px-4 py-5 text-center md:min-h-[100px] md:flex-row md:justify-between md:text-left">
|
||
<div>
|
||
<p className="text-sm font-semibold text-neutral-800">{title}</p>
|
||
<p className="mt-0.5 max-w-xl text-xs text-neutral-600 md:text-sm">{subtitle}</p>
|
||
</div>
|
||
<span className="mt-2 shrink-0 rounded-full border border-neutral-300 bg-white px-3 py-1 text-[11px] font-medium text-neutral-700 md:mt-0">
|
||
Espaço disponível
|
||
</span>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<aside
|
||
className="w-full border-y border-neutral-200/90 bg-white"
|
||
aria-label={slotLabel}
|
||
>
|
||
<div className="mx-auto w-full max-w-[1200px] px-0">
|
||
<div className="flex items-center gap-2 px-4 pt-2 pb-1">
|
||
<span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-400">{slotLabel}</span>
|
||
</div>
|
||
<div className="overflow-hidden">
|
||
{href ? (
|
||
<Link
|
||
href={href}
|
||
className="block w-full outline-none transition-opacity hover:opacity-95 focus-visible:ring-2 focus-visible:ring-[#0066cc] focus-visible:ring-offset-2"
|
||
target={href.startsWith("http") ? "_blank" : undefined}
|
||
rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
|
||
>
|
||
{inner}
|
||
</Link>
|
||
) : (
|
||
inner
|
||
)}
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|