90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import type { BannerSectionPayload } from '@homaroma/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getLocalizedField } from '../utils/localization';
|
|
|
|
interface DynamicBannerProps {
|
|
payload: BannerSectionPayload;
|
|
}
|
|
|
|
export default function DynamicBanner({ payload }: DynamicBannerProps) {
|
|
const { i18n } = useTranslation();
|
|
const lang = i18n.language;
|
|
const { imageUrl, linkUrl } = payload;
|
|
const title = getLocalizedField(payload.title, lang);
|
|
const description = getLocalizedField(payload.description, lang);
|
|
const buttonText = getLocalizedField(payload.buttonText, lang);
|
|
const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? payload.focalPoint : undefined;
|
|
const imageStyle = focalPoint ? { objectPosition: `${focalPoint.x} ${focalPoint.y}` } : undefined;
|
|
|
|
return (
|
|
<section className="ui-section-band bg-pop-bg relative overflow-hidden">
|
|
{linkUrl ? (
|
|
<Link to={linkUrl} className="ui-banner-shell group block cursor-pointer">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src={imageUrl}
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
|
|
alt={title || "Banner"}
|
|
style={imageStyle}
|
|
/>
|
|
<div className="ui-banner-overlay"></div>
|
|
</div>
|
|
|
|
<div className="ui-banner-content">
|
|
{title && (
|
|
<h3 className="font-serif text-3xl font-light leading-tight text-pop-pink md:text-5xl">
|
|
{title}
|
|
</h3>
|
|
)}
|
|
{description && (
|
|
<p className="font-light text-base text-pop-bg/95 md:text-lg">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{buttonText && (
|
|
<div className="pt-4">
|
|
<span className="ui-button-secondary">
|
|
{buttonText}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<div className="ui-banner-shell group block cursor-default">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src={imageUrl}
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
|
|
alt={title || "Banner"}
|
|
style={imageStyle}
|
|
/>
|
|
<div className="ui-banner-overlay"></div>
|
|
</div>
|
|
|
|
<div className="ui-banner-content">
|
|
{title && (
|
|
<h3 className="font-serif text-3xl font-light leading-tight text-pop-pink md:text-5xl">
|
|
{title}
|
|
</h3>
|
|
)}
|
|
{description && (
|
|
<p className="font-light text-base text-pop-bg/95 md:text-lg">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{buttonText && (
|
|
<div className="pt-4">
|
|
<span className="ui-button-secondary">
|
|
{buttonText}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|