88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { DecryptedImage } from "@/components/common/decrypted-image";
|
|
import { adClickData } from "@/lib/api/ads-actions";
|
|
import type { AdvertiseInfo, AdvitiseData } from "@/lib/api/types";
|
|
import { IMG_PLACEHOLDER } from "@/lib/image/decrypt";
|
|
|
|
import { adHref, pickBannerAds } from "./pick";
|
|
|
|
type AdBannersProps = {
|
|
variant?: "pc" | "h5";
|
|
items?: AdvertiseInfo[] | null;
|
|
advitise?: AdvitiseData | null;
|
|
className?: string;
|
|
};
|
|
|
|
/** 公共 Banner 广告：对接 advitise.detailbannerList（后台位置 3「详情横幅」，素材 720×150）；无数据不渲染 */
|
|
export function AdBanners({
|
|
variant = "pc",
|
|
items,
|
|
advitise,
|
|
className = "",
|
|
}: AdBannersProps) {
|
|
const isH5 = variant === "h5";
|
|
const apiList = pickBannerAds(items, advitise);
|
|
if (!apiList.length) return null;
|
|
|
|
if (isH5) {
|
|
return (
|
|
<div
|
|
data-component="ad-banners"
|
|
data-variant="h5"
|
|
className={`flex flex-col gap-[18px] ${className}`}
|
|
>
|
|
{apiList.map((ad, index) => {
|
|
const href = adHref(ad.link, "#h5-download");
|
|
const external = Boolean(ad.link?.trim());
|
|
return (
|
|
<a
|
|
key={ad.id || `banner-${index}`}
|
|
href={href}
|
|
target={external ? "_blank" : undefined}
|
|
rel={external ? "sponsored nofollow noopener noreferrer" : undefined}
|
|
{...adClickData(ad)}
|
|
className="block aspect-[720/150] overflow-hidden rounded-xl"
|
|
>
|
|
<DecryptedImage
|
|
src={ad.images || null}
|
|
fallback={IMG_PLACEHOLDER}
|
|
alt={ad.title || "推广"}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
data-component="ad-banners"
|
|
data-variant="pc"
|
|
className={`grid grid-cols-2 gap-5 ${className}`}
|
|
>
|
|
{apiList.map((ad, index) => {
|
|
const href = adHref(ad.link);
|
|
const external = Boolean(ad.link?.trim());
|
|
return (
|
|
<a
|
|
key={ad.id || `banner-${index}`}
|
|
href={href}
|
|
target={external ? "_blank" : undefined}
|
|
rel={external ? "sponsored nofollow noopener noreferrer" : undefined}
|
|
{...adClickData(ad)}
|
|
className="block aspect-[720/150] overflow-hidden rounded-xl"
|
|
>
|
|
<DecryptedImage
|
|
src={ad.images || null}
|
|
fallback={IMG_PLACEHOLDER}
|
|
alt={ad.title || "推广"}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|