Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | "use client";
import React from "react";
import Image from "next/image";
import Link from "next/link";
export interface PromoBannerItem {
id: number;
title: string;
headline: string;
description: string | null;
ctaText: string;
ctaLink: string | null;
imageUrl: string;
backgroundColor: string;
textColor: string;
darkBgColor: string | null;
darkTextColor: string | null;
size: "large" | "small";
imagePosition: "left" | "right";
order: number;
product?: {
id: number;
title: string;
price: number;
discountedPrice: number | null;
image: { id: number; url: string; thumbnailUrl: string | null } | null;
} | null;
}
interface PromoBannerProps {
promoBanners?: PromoBannerItem[];
}
const PromoBanner: React.FC<PromoBannerProps> = ({ promoBanners }) => {
// If no banners, show nothing
if (!promoBanners || promoBanners.length === 0) {
return null;
}
// Separate large and small banners
const largeBanners = promoBanners.filter((b) => b.size === "large");
const smallBanners = promoBanners.filter((b) => b.size === "small");
return (
<section className="overflow-hidden py-20">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
{/* Large Banners */}
{largeBanners.map((banner) => (
<LargeBanner key={banner.id} banner={banner} />
))}
{/* Small Banners Grid */}
{smallBanners.length > 0 && (
<div className="grid gap-7.5 grid-cols-1 lg:grid-cols-2">
{smallBanners.map((banner) => (
<SmallBanner key={banner.id} banner={banner} />
))}
</div>
)}
</div>
</section>
);
};
interface BannerComponentProps {
banner: PromoBannerItem;
}
const LargeBanner: React.FC<BannerComponentProps> = ({ banner }) => {
const link = banner.ctaLink || (banner.product ? `/product/${banner.product.id}` : "#");
const bannerId = `promo-banner-large-${banner.id}`;
return (
<>
{/* Dark mode override styles - only use .dark class selector to match Tailwind config */}
<style jsx global>{`
.dark #${bannerId} {
${banner.darkBgColor ? `background-color: ${banner.darkBgColor} !important;` : ""}
${banner.darkTextColor ? `color: ${banner.darkTextColor} !important;` : ""}
}
`}</style>
<div
id={bannerId}
className="relative z-1 overflow-hidden rounded-lg py-12.5 lg:py-17.5 xl:py-22.5 px-4 sm:px-7.5 lg:px-14 xl:px-19 mb-7.5"
style={{
backgroundColor: banner.backgroundColor,
color: banner.textColor,
}}
>
<div
className={`max-w-[550px] w-full ${
banner.imagePosition === "left" ? "ml-auto text-right" : ""
}`}
>
<span className="block font-medium text-xl mb-3">{banner.title}</span>
<h2 className="font-bold text-xl lg:text-heading-4 xl:text-heading-3 mb-5">
{banner.headline}
</h2>
{banner.description && <p className="opacity-80">{banner.description}</p>}
<Link
href={link}
className="inline-flex font-medium text-custom-sm text-white bg-blue py-[11px] px-9.5 rounded-md ease-out duration-200 hover:bg-blue-dark mt-7.5"
>
{banner.ctaText}
</Link>
</div>
{banner.imageUrl && (
<Image
src={banner.imageUrl}
alt={banner.title}
className={`absolute bottom-0 -z-1 max-h-[350px] w-auto ${
banner.imagePosition === "left"
? "left-4 lg:left-26"
: "right-4 lg:right-26"
}`}
width={274}
height={350}
/>
)}
</div>
</>
);
};
const SmallBanner: React.FC<BannerComponentProps> = ({ banner }) => {
const link = banner.ctaLink || (banner.product ? `/product/${banner.product.id}` : "#");
const isImageLeft = banner.imagePosition === "left";
const bannerId = `promo-banner-small-${banner.id}`;
return (
<>
{/* Dark mode override styles - only use .dark class selector to match Tailwind config */}
<style jsx global>{`
.dark #${bannerId} {
${banner.darkBgColor ? `background-color: ${banner.darkBgColor} !important;` : ""}
${banner.darkTextColor ? `color: ${banner.darkTextColor} !important;` : ""}
}
`}</style>
<div
id={bannerId}
className="relative z-1 overflow-hidden rounded-lg py-10 xl:py-16 px-4 sm:px-7.5 xl:px-10"
style={{
backgroundColor: banner.backgroundColor,
color: banner.textColor,
}}
>
{banner.imageUrl && (
<Image
src={banner.imageUrl}
alt={banner.title}
className={`absolute top-1/2 -translate-y-1/2 -z-1 max-h-[200px] w-auto ${
isImageLeft ? "left-3 sm:left-10" : "right-3 sm:right-8.5"
}`}
width={200}
height={200}
/>
)}
<div className={isImageLeft ? "text-right" : ""}>
<span className="block text-lg mb-1.5">{banner.title}</span>
<h2 className="font-bold text-xl lg:text-heading-4 mb-2.5">{banner.headline}</h2>
{banner.description && (
<p className="max-w-[285px] text-custom-sm opacity-80">
{banner.description}
</p>
)}
<Link
href={link}
className="inline-flex font-medium text-custom-sm text-white bg-blue py-2.5 px-8.5 rounded-md ease-out duration-200 hover:bg-blue-dark mt-7.5"
>
{banner.ctaText}
</Link>
</div>
</div>
</>
);
};
export default PromoBanner;
|