admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-06-21 01:03:29 -04:00
1 parent c365add07f
commit c449de2482
28 files changed
+694 -300
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/DynamicScentNotesBreakdown.tsx
+19 -19
View File
@@ -1,17 +1,17 @@
import type { ScentNotesBreakdownPayload } from '@homaroma/types';
import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';
interface DynamicScentNotesBreakdownProps {
payload: any;
payload: ScentNotesBreakdownPayload;
}
export default function DynamicScentNotesBreakdown({ payload }: DynamicScentNotesBreakdownProps) {
const { i18n } = useTranslation();
const lang = i18n.language;
const p = payload || {};
const title = getLocalizedField(p.title, lang);
const description = getLocalizedField(p.description, lang);
const notes = (value: any) => Array.isArray(value)
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 = {
@@ -23,39 +23,39 @@ export default function DynamicScentNotesBreakdown({ payload }: DynamicScentNote
ko: { top: '탑 노트', heart: '미들 노트', base: '베이스 노트' }
} as const;
const labelSet = labels[lang as keyof typeof labels] ?? labels.en;
const topNotes = notes(p.topNotes);
const heartNotes = notes(p.heartNotes ?? p.middleNotes);
const baseNotes = notes(p.baseNotes);
const topNotes = notes(payload.topNotes);
const heartNotes = notes(payload.middleNotes);
const baseNotes = notes(payload.baseNotes);
return (
<section className="py-20 px-6 bg-spa-light">
<div className="max-w-5xl mx-auto text-center">
<h2 className="text-3xl md:text-5xl font-serif text-spa-forest mb-6">
<section className="ui-section-band bg-spa-light">
<div className="ui-section-inner text-center">
<h2 className="mb-6 font-serif text-3xl text-spa-forest md:text-5xl">
{title || 'Scent Notes'}
</h2>
{description && (
<p className="text-lg text-spa-stone/80 max-w-2xl mx-auto mb-16">
<p className="ui-section-subtitle mb-16 text-lg text-spa-stone/80">
{description}
</p>
)}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
<h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">{labelSet.top}</h3>
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
<div className="ui-shell-card p-8">
<h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-spa-forest">{labelSet.top}</h3>
<p className="text-spa-stone font-light leading-relaxed">
{topNotes || 'The initial, lighter smells of the fragrance.'}
</p>
</div>
<div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
<h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">{labelSet.heart}</h3>
<div className="ui-shell-card p-8">
<h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-spa-forest">{labelSet.heart}</h3>
<p className="text-spa-stone font-light leading-relaxed">
{heartNotes || 'The core of the fragrance, emerging just after the top notes.'}
</p>
</div>
<div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
<h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">{labelSet.base}</h3>
<div className="ui-shell-card p-8">
<h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-spa-forest">{labelSet.base}</h3>
<p className="text-spa-stone font-light leading-relaxed">
{baseNotes || 'The deepest, richest scents that linger the longest.'}
</p>