Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 4x 9x 9x | "use client";
import { CompareChoice } from "@/features/sorting/CompareChoice";
import { COMPARE_SUBLINE, ROUND_COPY, WELCOME_ROUND_KICKER } from "@/features/sorting/roundCopy";
import { toItem, type CompareOutcome, type SampleItem } from "./sampleData";
interface WelcomeCompareProps {
left: SampleItem;
right: SampleItem;
/** Reports the typed compare outcome, then advances the walkthrough. */
onOutcome: (outcome: CompareOutcome) => void;
}
// Beat 3 — two of YOUR things side by side, taught with the REAL CompareChoice
// in its synchronous local mode: no fetch and no router. A neutral kicker
// (WELCOME_ROUND_KICKER) over the shared explainer from ROUND_COPY — never two
// product cards to buy.
export function WelcomeCompare({
left,
right,
onOutcome,
}: WelcomeCompareProps) {
return (
<section className="flex flex-col items-center text-center gap-6">
<div className="flex flex-col items-center gap-1">
<p className="text-sm text-ink-soft">{WELCOME_ROUND_KICKER}</p>
<p className="text-sm text-ink-soft">{ROUND_COPY.compare.explainer}</p>
</div>
<h1 className="font-display text-3xl text-ink">Which would you reach for first?</h1>
<p className="text-sm text-ink-soft">{COMPARE_SUBLINE}</p>
<div className="w-full max-w-xl">
<CompareChoice
submit={{
kind: "local",
onDecision: (result) =>
onOutcome(
result === "item_a"
? { kind: "win", winnerId: left.id }
: result === "item_b"
? { kind: "win", winnerId: right.id }
: { kind: result },
),
}}
itemA={toItem(left)}
itemB={toItem(right)}
heroA={left.imageSrc}
heroB={right.imageSrc}
/>
</div>
</section>
);
}
|