68 lines
3.3 KiB
TypeScript
68 lines
3.3 KiB
TypeScript
import type { ScentNotesBreakdownPayload } from '@homaroma/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { getLocalizedField } from '../utils/localization';
|
|
|
|
interface DynamicScentNotesBreakdownProps {
|
|
payload: ScentNotesBreakdownPayload;
|
|
}
|
|
|
|
export default function DynamicScentNotesBreakdown({ payload }: DynamicScentNotesBreakdownProps) {
|
|
const { i18n } = useTranslation();
|
|
const lang = i18n.language;
|
|
const title = getLocalizedField(payload.title, lang);
|
|
const description = getLocalizedField(payload.description, lang);
|
|
const notes = (value: ScentNotesBreakdownPayload['topNotes'] | ScentNotesBreakdownPayload['middleNotes'] | ScentNotesBreakdownPayload['baseNotes']) => Array.isArray(value)
|
|
? value.map((item) => getLocalizedField(item, lang)).filter(Boolean).join(', ')
|
|
: getLocalizedField(value, lang);
|
|
const labels = {
|
|
th: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
|
|
en: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
|
|
ja: { top: 'トップノート', heart: 'ハートノート', base: 'ベースノート' },
|
|
zh: { top: '前调', heart: '中调', base: '后调' },
|
|
vi: { top: 'Hương đầu', heart: 'Hương giữa', base: 'Hương cuối' },
|
|
ko: { top: '탑 노트', heart: '미들 노트', base: '베이스 노트' }
|
|
} as const;
|
|
const labelSet = labels[lang as keyof typeof labels] ?? labels.en;
|
|
const topNotes = notes(payload.topNotes);
|
|
const heartNotes = notes(payload.middleNotes);
|
|
const baseNotes = notes(payload.baseNotes);
|
|
|
|
return (
|
|
<section className="ui-section-band bg-pop-bg">
|
|
<div className="ui-section-inner text-center">
|
|
<h2 className="mb-6 font-serif text-3xl text-pop-black md:text-5xl">
|
|
{title || 'Scent Notes'}
|
|
</h2>
|
|
{description && (
|
|
<p className="ui-section-subtitle mb-16 text-lg text-pop-black/80">
|
|
{description}
|
|
</p>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
|
<div className="ui-shell-card p-8 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
|
<h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-pop-black">{labelSet.top}</h3>
|
|
<p className="text-pop-black/80 font-light leading-relaxed">
|
|
{topNotes || 'The initial, lighter smells of the fragrance.'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="ui-shell-card p-8 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
|
<h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-pop-black">{labelSet.heart}</h3>
|
|
<p className="text-pop-black/80 font-light leading-relaxed">
|
|
{heartNotes || 'The core of the fragrance, emerging just after the top notes.'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="ui-shell-card p-8 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
|
<h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-pop-black">{labelSet.base}</h3>
|
|
<p className="text-pop-black/80 font-light leading-relaxed">
|
|
{baseNotes || 'The deepest, richest scents that linger the longest.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|