100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import type { EditorialTileSectionPayload } from '@homaroma/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getLocalizedField } from '../utils/localization';
|
|
|
|
interface DynamicEditorialTileProps {
|
|
payload: EditorialTileSectionPayload;
|
|
}
|
|
|
|
export default function DynamicEditorialTile({ payload }: DynamicEditorialTileProps) {
|
|
const { i18n } = useTranslation();
|
|
const lang = i18n.language;
|
|
const {
|
|
imageUrl,
|
|
imagePosition = 'left',
|
|
imageAspectRatio = 'square',
|
|
buttonLink
|
|
} = payload;
|
|
const title = getLocalizedField(payload.title, lang);
|
|
const description = getLocalizedField(payload.description, lang);
|
|
const buttonText = getLocalizedField(payload.buttonText, lang);
|
|
|
|
const getAspectClass = (ratio?: string) => {
|
|
switch (ratio) {
|
|
case 'portrait':
|
|
return 'aspect-[3/4]';
|
|
case 'tall':
|
|
return 'aspect-[2/3]';
|
|
case 'auto':
|
|
return 'aspect-auto';
|
|
case 'square':
|
|
default:
|
|
return 'aspect-square';
|
|
}
|
|
};
|
|
|
|
const renderTitle = (text: string) => {
|
|
if (!text) return null;
|
|
return text.split('[').map((part, i) => {
|
|
if (part.includes(']')) {
|
|
const [accent, rest] = part.split(']');
|
|
return (
|
|
<span key={i}>
|
|
<span className="text-pop-pink font-medium italic">
|
|
{accent}
|
|
</span>
|
|
{rest}
|
|
</span>
|
|
);
|
|
}
|
|
return <span key={i}>{part}</span>;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<section
|
|
className="ui-section-band w-full overflow-hidden"
|
|
style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}
|
|
>
|
|
<div className="ui-section-inner grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
|
|
<div className={`group relative ${getAspectClass(imageAspectRatio)} w-full overflow-hidden rounded-3xl shadow-xl ${
|
|
imagePosition === 'left' ? 'md:order-1' : 'md:order-2'
|
|
}`}>
|
|
<img
|
|
src={imageUrl}
|
|
alt={title}
|
|
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-neutral-900/5 mix-blend-overlay"></div>
|
|
</div>
|
|
|
|
<div className={`flex flex-col justify-center space-y-6 md:space-y-8 ${
|
|
imagePosition === 'left' ? 'md:order-2 md:pl-8' : 'md:order-1 md:pr-8'
|
|
}`}>
|
|
<h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl" style={{ color: payload.textColor }}>
|
|
{renderTitle(title) || title}
|
|
</h2>
|
|
<div className="w-12 h-[1px] bg-pop-pink"></div>
|
|
<p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base" style={{ color: payload.textColor }}>
|
|
{description}
|
|
</p>
|
|
{buttonText && buttonLink && (
|
|
<div className="pt-4">
|
|
<Link
|
|
to={buttonLink}
|
|
className="ui-chip border-current px-8 py-3.5 hover:bg-pop-pink hover:border-pop-pink hover:text-pop-bg"
|
|
>
|
|
{buttonText}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|