// Results page — magazine ranking, mobile-first, no serif/italic
const { useMemo: useResMemo } = React;
function Results({ answers, stores, questions, onRestart, useIllustration, layout }) {
const ranked = useResMemo(() => {
return stores
.map(s => ({ store: s, ...window.scoreStore(s, answers) }))
.filter(r => r.score > 0)
.sort((a, b) => b.score - a.score)
.slice(0, 5);
}, [stores, answers]);
if (ranked.length === 0) {
return (
条件に合うお店が
見つかりませんでした。
);
}
return (
{layout === 'ranking' && }
{layout === 'editorial' && }
{layout === 'list' && }
);
}
function ResultHeader({ answers, questions, ranked, onRestart }) {
const summary = questions
.map(q => {
const a = answers[q.id];
if (!a) return null;
const lbl = Array.isArray(a)
? a.map(v => q.options.find(o => o.value === v)?.label).filter(Boolean).join('・')
: q.options.find(o => o.value === a)?.label;
return lbl;
})
.filter(Boolean);
return (
GIFT GUIDE No.{String(new Date().getDate()).padStart(2, '0')} — CREAM TARO
あなたに
ぴったりの
{ranked.length}軒。
{summary.map((s, i) => (
{s}
))}
);
}
function RankingLayout({ ranked, useIllustration }) {
return (
{ranked.slice(1).map((r, i) => (
))}
);
}
function HeroCard({ item, useIllustration }) {
const { store, score } = item;
return (
EDITOR'S CHOICE
{store.name}
{store.category} — {store.area}
{store.desc}
);
}
function RankRow({ rank, item, useIllustration }) {
const { store } = item;
return (
{String(rank).padStart(2, '0')}
{store.name}
{store.category} — {store.area}
{store.desc}
);
}
function Meta({ label, value }) {
return (
);
}
function EditorialLayout({ ranked, useIllustration }) {
return (
{ranked.slice(1).map((r, i) => (
{r.store.category}
{r.store.name}
{r.store.desc}
{r.store.area} — {r.store.price}
))}
);
}
function ListLayout({ ranked, useIllustration }) {
return (
{ranked.map((r, i) => (
{String(i + 1).padStart(2, '0')}
{r.store.name}
{r.store.category} — {r.store.area}
{r.store.desc}
{r.store.price}
))}