56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import type { HeroArticlePayload } from '@homaroma/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getLocalizedField } from '../utils/localization';
|
|
|
|
interface DynamicHeroArticleProps {
|
|
payload: HeroArticlePayload & {
|
|
imageUrl?: string;
|
|
date?: string;
|
|
category?: string | { [key: string]: string };
|
|
};
|
|
}
|
|
|
|
export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps) {
|
|
const { t, i18n } = useTranslation();
|
|
const lang = i18n.language;
|
|
const p = payload || {};
|
|
const { imageUrl, date } = p;
|
|
const title = getLocalizedField(p.title, lang);
|
|
const subtitle = getLocalizedField(p.subtitle, lang);
|
|
const author = getLocalizedField(p.author, lang);
|
|
const category = getLocalizedField(p.category, lang);
|
|
|
|
return (
|
|
<section className="ui-hero-shell min-h-[60vh] md:min-h-[80vh]">
|
|
{imageUrl && (
|
|
<div className="absolute inset-0 z-0">
|
|
<img src={imageUrl} alt={title || 'Article Hero'} className="w-full h-full object-cover" />
|
|
<div className="ui-hero-overlay" />
|
|
</div>
|
|
)}
|
|
<div className="ui-hero-content text-white">
|
|
{category && (
|
|
<span className="mb-4 block text-sm font-bold uppercase tracking-widest text-spa-gold">
|
|
{category}
|
|
</span>
|
|
)}
|
|
<h1 className="ui-hero-title mb-6">
|
|
{title || t('newsletter.articleDefaultTitle', 'Scent Guide Article')}
|
|
</h1>
|
|
{subtitle && (
|
|
<p className="mx-auto mb-8 max-w-2xl text-lg font-light opacity-90 md:text-xl">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
{(author || date) && (
|
|
<div className="flex items-center justify-center gap-4 text-sm font-medium uppercase tracking-wide opacity-80">
|
|
{author && <span>{t('newsletter.byAuthor', { author })}</span>}
|
|
{author && date && <span>•</span>}
|
|
{date && <span>{date}</span>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|