import React, { useState } from "react";
// ---------- Design tokens ----------
const COLORS = {
bg: "#0E1A2B",
bgPanel: "#0F2038",
ink: "#0E1A2B",
parchment: "#EDE6D3",
parchmentDim: "#B9B0A0",
brass: "#D9B84E",
brassDim: "#8A7326",
rule: "#3C5A80",
gridLine: "#1D3654",
accentRed: "#C25B41",
};
const FONT_IMPORT =
"@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap');";
// ---------- Questions ----------
// econ: negative = collectivist/left, positive = market/right
// soc: negative = libertarian, positive = authoritarian/traditional
// nat: negative = globalist, positive = nationalist
// env: positive = environment-prioritizing
// lib: positive = fusion of free-market + personal-freedom
// radical: positive = wants systemic/outside-system change
const QUESTIONS = [
{
id: 1,
text: "Government should heavily regulate, or take public ownership of, major industries like banking, healthcare, and energy.",
econ: -3,
},
{
id: 2,
text: "Free markets, left largely alone, produce the best outcomes for society.",
econ: 3,
},
{
id: 3,
text: "Wealth should be redistributed more through higher taxes on high earners.",
econ: -2,
},
{
id: 4,
text: "Labor unions should have significant power to negotiate on behalf of workers.",
econ: -2,
},
{
id: 5,
text: "Government spending and welfare programs should be significantly reduced.",
econ: 3,
},
{
id: 6,
text: "Healthcare should be a guaranteed public service, free at the point of use.",
econ: -2,
},
{
id: 7,
text: "Private property and ownership rights are foundational and should rarely be limited by government.",
econ: 2,
},
{
id: 8,
text: "Traditional family structures and values should be actively promoted by society.",
soc: 2,
},
{
id: 9,
text: "People should be free to live however they choose, with minimal moral judgment from society or government.",
soc: -2,
},
{
id: 10,
text: "Strong law-and-order policies, even if they limit some civil liberties, are necessary to keep society safe.",
soc: 2,
},
{
id: 11,
text: "Government surveillance and policing should be significantly limited to protect civil liberties.",
soc: -2,
},
{
id: 12,
text: "Drug use should be decriminalized and treated as a personal or health issue, not a crime.",
soc: -2,
},
{
id: 13,
text: "Religious or cultural tradition should play a central role in shaping law and public policy.",
soc: 2,
},
{
id: 14,
text: "Immigration levels should be significantly reduced from where they are today.",
soc: 1,
nat: 3,
},
{
id: 15,
text: "Borders should be much more open, with immigration policy prioritizing humanitarian concerns.",
soc: -1,
nat: -3,
},
{
id: 16,
text: "National sovereignty should take priority over international cooperation and global institutions.",
nat: 3,
},
{
id: 17,
text: "Protecting the environment should take priority over economic growth, even if it costs jobs.",
econ: -1,
env: 3,
},
{
id: 18,
text: "Economic growth should take priority over environmental protection, even if it increases pollution or environmental harm.",
econ: 2,
env: -3,
},
{
id: 19,
text: "Government should stay out of the economy — and people should have complete personal freedom in their private lives.",
econ: 2,
soc: -2,
lib: 3,
},
{
id: 20,
text: "Reform within the current system isn't enough — radical, systemic change to our economic and political structures is necessary.",
econ: -1,
radical: 3,
},
{
id: 21,
text: "Abortion should be legal and accessible, with minimal government restriction.",
soc: -2,
},
{
id: 22,
text: "Same-sex relationships and LGBTQ+ identities should be fully accepted and protected under the law.",
soc: -2,
},
{
id: 23,
text: "Military intervention abroad — including preemptive action — is justified to defend national interests, allies, or human rights.",
soc: 2,
nat: 1,
},
{
id: 24,
text: "Civilian access to firearms should be a protected individual right, with minimal government restriction.",
soc: -1,
lib: 1,
},
{
id: 25,
text: "The death penalty should remain available as a legal punishment for the most serious crimes.",
soc: 2,
},
];
const LIKERT = [
{ v: -2, label: "Strongly disagree" },
{ v: -1, label: "Disagree" },
{ v: 0, label: "Neutral" },
{ v: 1, label: "Agree" },
{ v: 2, label: "Strongly agree" },
];
// ---------- Ideology anchors ----------
const ANCHORS = [
{
name: "Communist / Marxist–Leninist",
x: -9,
y: 7,
tags: { radical: 2 },
desc: "Favors full collective ownership of the economy and is willing to use strong state authority to get there.",
},
{
name: "Anarchist",
x: -9,
y: -9,
tags: { radical: 3, lib: 1 },
desc: "Rejects both capitalism and centralized state authority — favors voluntary, decentralized collective organization.",
},
{
name: "Democratic Socialist",
x: -7,
y: -4,
tags: { radical: 1 },
desc: "Wants to replace or heavily curtail capitalism, but through democratic institutions rather than upheaval.",
},
{
name: "Leftist",
x: -8,
y: -2,
tags: { radical: 2 },
desc: "Anti-capitalist and skeptical of the two-party system, favoring grassroots and structural change over incremental reform.",
},
{
name: "Progressive",
x: -5,
y: -6,
tags: {},
desc: "Pushes hard for social and economic reform — often from inside the Democratic Party — while staying compatible with markets.",
},
{
name: "Green",
x: -4,
y: -8,
tags: { env: 3 },
desc: "Centers environmental sustainability and decentralization, paired with left-leaning economics and social liberalism.",
},
{
name: "Liberal",
x: -3,
y: -3,
tags: {},
desc: "Believes in reforming capitalism through regulation and strong institutions, with a gradual, rights-focused approach to social issues.",
},
{
name: "Democrat",
x: -2,
y: -2,
tags: {},
desc: "Center-left, defined more by loyalty to the Democratic Party's coalition than by a sharp ideological edge.",
},
{
name: "Centrist / Moderate",
x: 0,
y: 0,
tags: {},
desc: "Picks and chooses across the spectrum, favoring pragmatic, case-by-case positions over a fixed ideology.",
},
{
name: "Classical Liberal",
x: 3,
y: -5,
tags: { lib: 1 },
desc: "Prioritizes individual rights, free markets, and limited government, in the tradition of Enlightenment liberalism.",
},
{
name: "Libertarian",
x: 6,
y: -8,
tags: { lib: 3 },
desc: "Wants government out of both the economy and personal life — free markets paired with maximal personal freedom.",
},
{
name: "Conservative",
x: 5,
y: 4,
tags: {},
desc: "Favors free markets and traditional social institutions, valuing continuity and gradual change over disruption.",
},
{
name: "Republican",
x: 4,
y: 3,
tags: {},
desc: "Center-right, defined more by loyalty to the Republican Party's coalition than by a single ideological line.",
},
{
name: "National Populist / Right-Nationalist",
x: 7,
y: 8,
tags: { nat: 3 },
desc: "Combines free-market or protectionist economics with strong nationalism and traditional social order.",
},
{
name: "Traditionalist / Authoritarian Right",
x: 9,
y: 9,
tags: { nat: 2 },
desc: "The furthest-right anchor here — strong state authority in service of a traditional, hierarchical social order.",
},
];
// ---------- Political reference points ----------
// labelDx and labelDy manually position labels so all names remain visible.
const POLITICIANS = [
{
name: "Xi Jinping",
role: "General Secretary, China",
x: -6,
y: 8,
labelDx: 8,
labelDy: -12,
note: "No clear current U.S. equivalent",
},
{
name: "Kim Jong Un",
role: "Supreme Leader, North Korea",
x: -9,
y: 9.5,
labelDx: 8,
labelDy: 18,
note: "No clear current U.S. equivalent",
},
{
name: "Miguel Díaz-Canel",
role: "President, Cuba",
x: -7,
y: 6,
labelDx: 8,
labelDy: 18,
note: "No clear current U.S. equivalent",
},
{
name: "Vladimir Putin",
role: "President, Russia",
x: 2,
y: 9,
labelDx: 8,
labelDy: 18,
},
{
name: "Benjamin Netanyahu",
role: "Prime Minister, Israel",
x: 7,
y: 8,
labelDx: -8,
labelDy: -12,
},
{
name: "Donald Trump",
role: "U.S. President",
x: 5,
y: 6,
labelDx: 8,
labelDy: 18,
},
{
name: "George W. Bush",
role: "Former U.S. President",
x: 3,
y: 3,
labelDx: 8,
labelDy: -12,
},
{
name: "Barack Obama",
role: "Former U.S. President",
x: -1,
y: -2,
labelDx: 8,
labelDy: -12,
},
{
name: "Joe Biden",
role: "Former U.S. President",
x: -3,
y: -3,
labelDx: -8,
labelDy: 18,
},
{
name: "Bernie Sanders",
role: "U.S. Senator",
x: -7,
y: -4,
labelDx: 8,
labelDy: -12,
},
{
name: "Alexandria Ocasio-Cortez",
shortName: "AOC",
role: "U.S. Representative",
x: -9,
y: -7,
labelDx: 8,
labelDy: 18,
},
{
name: "Rand Paul",
role: "U.S. Senator",
x: 6,
y: -7,
labelDx: 8,
labelDy: 20,
},
{
name: "Thomas Massie",
role: "U.S. Representative",
x: 5,
y: -6,
labelDx: -8,
labelDy: -14,
},
{
name: "Javier Milei",
role: "President, Argentina",
x: 9,
y: -8,
labelDx: -8,
labelDy: 18,
},
];
function sumAbs(arr, key) {
return arr.reduce((sum, question) => {
return sum + Math.abs(question[key] || 0);
}, 0);
}
const ECON_MAX = sumAbs(QUESTIONS, "econ") * 2;
const SOC_MAX = sumAbs(QUESTIONS, "soc") * 2;
const NAT_MAX = sumAbs(QUESTIONS, "nat") * 2;
const ENV_MAX = sumAbs(QUESTIONS, "env") * 2;
const LIB_MAX = sumAbs(QUESTIONS, "lib") * 2;
const RAD_MAX = sumAbs(QUESTIONS, "radical") * 2;
function computeScores(answers) {
let econ = 0;
let soc = 0;
let nat = 0;
let env = 0;
let lib = 0;
let radical = 0;
QUESTIONS.forEach((question) => {
const answer = answers[question.id] ?? 0;
if (question.econ) econ += answer * question.econ;
if (question.soc) soc += answer * question.soc;
if (question.nat) nat += answer * question.nat;
if (question.env) env += answer * question.env;
if (question.lib) lib += answer * question.lib;
if (question.radical) radical += answer * question.radical;
});
return {
econ: ECON_MAX ? (econ / ECON_MAX) * 10 : 0,
soc: SOC_MAX ? (soc / SOC_MAX) * 10 : 0,
nat: NAT_MAX ? (nat / NAT_MAX) * 10 : 0,
env: ENV_MAX ? (env / ENV_MAX) * 10 : 0,
lib: LIB_MAX ? (lib / LIB_MAX) * 10 : 0,
radical: RAD_MAX ? (radical / RAD_MAX) * 10 : 0,
};
}
function rankAnchors(scores) {
const ranked = ANCHORS.map((anchor) => {
const distance = Math.sqrt(
(scores.econ - anchor.x) ** 2 + (scores.soc - anchor.y) ** 2
);
let bonus = 0;
if (anchor.tags.nat) {
bonus += scores.nat * anchor.tags.nat * 0.35;
}
if (anchor.tags.env) {
bonus += scores.env * anchor.tags.env * 0.35;
}
if (anchor.tags.lib) {
bonus += scores.lib * anchor.tags.lib * 0.35;
}
if (anchor.tags.radical) {
bonus += scores.radical * anchor.tags.radical * 0.35;
}
return {
...anchor,
dist: distance - bonus,
};
});
ranked.sort((a, b) => a.dist - b.dist);
return ranked;
}
// ---------- Compass plot ----------
function CompassPlot({ scores }) {
const SIZE = 520;
const PAD = 82;
const RANGE = SIZE - PAD * 2;
const toPx = (x, y) => ({
px: SIZE / 2 + (x / 10) * (RANGE / 2),
py: SIZE / 2 - (y / 10) * (RANGE / 2),
});
const userPoint = toPx(scores.econ, scores.soc);
const gridValues = [-10, -5, 0, 5, 10];
return (
<svg
viewBox={`0 0 ${SIZE} ${SIZE}`}
role="img"
aria-label="Political compass showing the user's result and political reference points"
style={{
width: "100%",
maxWidth: 540,
margin: "0 auto",
display: "block",
}}
>
<defs>
<radialGradient id="panelGlow" cx="50%" cy="42%" r="75%">
<stop offset="0%" stopColor="#1B3A5C" />
<stop offset="100%" stopColor={COLORS.bgPanel} />
</radialGradient>
<filter id="userGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect
x="0"
y="0"
width={SIZE}
height={SIZE}
fill="url(#panelGlow)"
rx="8"
/>
{/* Grid lines */}
{gridValues.map((value) => {
const { px } = toPx(value, 0);
const { py } = toPx(0, value);
return (
<g key={`grid-${value}`}>
<line
x1={px}
y1={PAD}
x2={px}
y2={SIZE - PAD}
stroke={value === 0 ? COLORS.rule : COLORS.gridLine}
strokeWidth={value === 0 ? 1.4 : 0.6}
/>
<line
x1={PAD}
y1={py}
x2={SIZE - PAD}
y2={py}
stroke={value === 0 ? COLORS.rule : COLORS.gridLine}
strokeWidth={value === 0 ? 1.4 : 0.6}
/>
</g>
);
})}
<rect
x={PAD}
y={PAD}
width={RANGE}
height={RANGE}
fill="none"
stroke={COLORS.rule}
strokeWidth="1"
/>
{/* Quadrant labels */}
<text
x={PAD + 10}
y={PAD + 18}
fontFamily="Space Mono, monospace"
fontSize="8"
fill={COLORS.parchmentDim}
>
COLLECTIVIST
</text>
<text
x={SIZE - PAD - 10}
y={PAD + 18}
textAnchor="end"
fontFamily="Space Mono, monospace"
fontSize="8"
fill={COLORS.parchmentDim}
>
MARKET
</text>
<text
x={PAD + 10}
y={SIZE - PAD - 10}
fontFamily="Space Mono, monospace"
fontSize="8"
fill={COLORS.parchmentDim}
>
LIBERTARIAN
</text>
<text
x={SIZE - PAD - 10}
y={SIZE - PAD - 10}
textAnchor="end"
fontFamily="Space Mono, monospace"
fontSize="8"
fill={COLORS.parchmentDim}
>
LIBERTARIAN
</text>
{/* Political reference points */}
{POLITICIANS.map((politician) => {
const { px, py } = toPx(politician.x, politician.y);
const labelDx = politician.labelDx ?? 8;
const labelDy = politician.labelDy ?? -12;
const labelX = px + labelDx;
const labelY = py + labelDy;
const textAnchor =
labelDx < 0 ? "end" : labelDx > 0 ? "start" : "middle";
const displayName = politician.shortName || politician.name;
return (
<g key={politician.name}>
<title>
{politician.name} — {politician.role}
{politician.note ? ` — ${politician.note}` : ""}
</title>
<line
x1={px}
y1={py}
x2={labelX}
y2={labelY - 3}
stroke={COLORS.parchmentDim}
strokeWidth="0.7"
opacity="0.8"
/>
<rect
x={px - 4}
y={py - 4}
width="8"
height="8"
rx="1"
fill={COLORS.brass}
stroke={COLORS.ink}
strokeWidth="1.2"
/>
<text
x={labelX}
y={labelY}
textAnchor={textAnchor}
fontFamily="Space Mono, monospace"
fontSize="8.5"
fontWeight="700"
fill={COLORS.parchment}
>
{displayName}
</text>
</g>
);
})}
{/* User point */}
<circle
cx={userPoint.px}
cy={userPoint.py}
r="14"
fill={COLORS.accentRed}
opacity="0.25"
/>
<circle
cx={userPoint.px}
cy={userPoint.py}
r="8"
fill={COLORS.accentRed}
stroke={COLORS.parchment}
strokeWidth="2"
filter="url(#userGlow)"
>
<title>
Your result: economic {scores.econ.toFixed(1)}, social{" "}
{scores.soc.toFixed(1)}
</title>
</circle>
<text
x={userPoint.px}
y={userPoint.py - 14}
textAnchor="middle"
fontFamily="Space Mono, monospace"
fontSize="8"
fontWeight="700"
fill={COLORS.parchment}
>
YOU
</text>
{/* Axis labels */}
<text
x={SIZE / 2}
y={SIZE - 20}
textAnchor="middle"
fontFamily="Space Mono, monospace"
fontSize="10"
letterSpacing="1"
fill={COLORS.parchmentDim}
>
COLLECTIVIST — MARKET
</text>
<text
x={18}
y={SIZE / 2}
textAnchor="middle"
fontFamily="Space Mono, monospace"
fontSize="10"
letterSpacing="1"
fill={COLORS.parchmentDim}
transform={`rotate(-90 18 ${SIZE / 2})`}
>
LIBERTARIAN — AUTHORITARIAN
</text>
</svg>
);
}
export default function PoliticalCompassQuiz() {
const [screen, setScreen] = useState("intro");
const [index, setIndex] = useState(0);
const [answers, setAnswers] = useState({});
const question = QUESTIONS[index];
const progress = ((index + 1) / QUESTIONS.length) * 100;
const selectAnswer = (value) => {
const nextAnswers = {
...answers,
[question.id]: value,
};
setAnswers(nextAnswers);
if (index < QUESTIONS.length - 1) {
setTimeout(() => {
setIndex((currentIndex) => currentIndex + 1);
}, 150);
} else {
setTimeout(() => {
setScreen("result");
}, 150);
}
};
const goBack = () => {
setIndex((currentIndex) => Math.max(0, currentIndex - 1));
};
const restart = () => {
setAnswers({});
setIndex(0);
setScreen("intro");
};
const scores = screen === "result" ? computeScores(answers) : null;
const ranked = scores ? rankAnchors(scores) : [];
const top = ranked[0] || null;
const runnersUp = ranked.slice(1, 3);
return (
<div
style={{
minHeight: "100vh",
background: COLORS.bg,
color: COLORS.parchment,
fontFamily: "Inter, sans-serif",
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "32px 16px",
}}
>
<style>{FONT_IMPORT}</style>
<div
style={{
width: "100%",
maxWidth: screen === "result" ? 720 : 480,
}}
>
{/* Header */}
<div
style={{
textAlign: "center",
marginBottom: 28,
}}
>
<div
style={{
fontFamily: "Space Mono, monospace",
fontSize: 11,
letterSpacing: 3,
color: COLORS.brass,
marginBottom: 6,
}}
>
GROUND ZERO
</div>
<div
style={{
fontFamily: "Fraunces, serif",
fontWeight: 600,
fontSize: 30,
lineHeight: 1.1,
}}
>
The Political Compass
</div>
</div>
{screen === "intro" && (
<div style={{ textAlign: "center" }}>
<p
style={{
color: COLORS.parchmentDim,
fontSize: 15,
lineHeight: 1.6,
marginBottom: 24,
}}
>
25 statements. React honestly, not strategically — there are no
right answers. At the end, you will be plotted on two axes:
economic and social. You will also be matched to the closest of
15 ideological labels.
</p>
<button
type="button"
onClick={() => setScreen("quiz")}
style={{
background: COLORS.brass,
color: COLORS.ink,
border: "none",
borderRadius: 3,
padding: "13px 28px",
fontFamily: "Space Mono, monospace",
fontWeight: 700,
fontSize: 13,
letterSpacing: 1,
cursor: "pointer",
}}
>
BEGIN →
</button>
</div>
)}
{screen === "quiz" && (
<div>
<div style={{ marginBottom: 20 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
fontFamily: "Space Mono, monospace",
fontSize: 11,
color: COLORS.parchmentDim,
marginBottom: 6,
}}
>
<span>
BEARING {String(index + 1).padStart(2, "0")} /{" "}
{QUESTIONS.length}
</span>
<span>{Math.round(progress)}%</span>
</div>
<div
style={{
height: 3,
background: COLORS.rule,
borderRadius: 2,
}}
>
<div
style={{
height: 3,
width: `${progress}%`,
background: COLORS.brass,
borderRadius: 2,
transition: "width 0.2s",
}}
/>
</div>
</div>
<div
style={{
background: COLORS.bgPanel,
border: `1px solid ${COLORS.rule}`,
borderRadius: 6,
padding: "28px 22px",
marginBottom: 20,
minHeight: 110,
}}
>
<p
style={{
fontFamily: "Fraunces, serif",
fontSize: 20,
lineHeight: 1.45,
fontWeight: 500,
margin: 0,
}}
>
{question.text}
</p>
</div>
<div
style={{
display: "flex",
flexDirection: "column",
gap: 8,
}}
>
{LIKERT.map((option) => {
const selected = answers[question.id] === option.v;
return (
<button
type="button"
key={option.v}
onClick={() => selectAnswer(option.v)}
style={{
background: selected ? COLORS.brass : "transparent",
color: selected ? COLORS.ink : COLORS.parchment,
border: `1px solid ${
selected ? COLORS.brass : COLORS.rule
}`,
borderRadius: 4,
padding: "12px 16px",
fontFamily: "Inter, sans-serif",
fontSize: 14,
fontWeight: 500,
textAlign: "left",
cursor: "pointer",
transition: "all 0.15s",
}}
>
{option.label}
</button>
);
})}
</div>
{index > 0 && (
<button
type="button"
onClick={goBack}
style={{
marginTop: 18,
background: "none",
border: "none",
color: COLORS.parchmentDim,
fontFamily: "Space Mono, monospace",
fontSize: 11,
letterSpacing: 1,
cursor: "pointer",
}}
>
← BACK
</button>
)}
</div>
)}
{screen === "result" && top && scores && (
<div>
<CompassPlot scores={scores} />
<div
style={{
textAlign: "center",
fontSize: 11,
color: COLORS.parchmentDim,
lineHeight: 1.5,
margin: "12px auto 18px",
maxWidth: 580,
}}
>
Squares mark political reference points. Their placement is
illustrative and intended only for general orientation, not as a
precise scientific measurement. Hover over a square to see the
politician’s role.
</div>
<details
style={{
border: `1px solid ${COLORS.rule}`,
borderRadius: 5,
padding: "10px 14px",
marginBottom: 24,
background: COLORS.bgPanel,
}}
>
<summary
style={{
cursor: "pointer",
fontFamily: "Space Mono, monospace",
fontSize: 11,
letterSpacing: 1,
color: COLORS.brass,
}}
>
VIEW ALL POLITICAL REFERENCE POINTS
</summary>
<div
style={{
display: "grid",
gridTemplateColumns:
"repeat(auto-fit, minmax(220px, 1fr))",
gap: "10px 18px",
marginTop: 16,
}}
>
{POLITICIANS.map((politician) => (
<div
key={politician.name}
style={{
fontSize: 12,
lineHeight: 1.4,
}}
>
<div
style={{
color: COLORS.parchment,
fontWeight: 600,
}}
>
<span style={{ color: COLORS.brass }}>■</span>{" "}
{politician.name}
</div>
<div
style={{
color: COLORS.parchmentDim,
marginLeft: 14,
}}
>
{politician.role}
</div>
</div>
))}
</div>
</details>
<div
style={{
textAlign: "center",
margin: "22px 0 6px",
}}
>
<div
style={{
fontFamily: "Space Mono, monospace",
fontSize: 11,
letterSpacing: 2,
color: COLORS.brass,
}}
>
CLOSEST MATCH
</div>
<div
style={{
fontFamily: "Fraunces, serif",
fontWeight: 700,
fontSize: 28,
margin: "6px 0",
}}
>
{top.name}
</div>
<div
style={{
fontFamily: "Space Mono, monospace",
fontSize: 12,
color: COLORS.parchmentDim,
}}
>
economic {scores.econ >= 0 ? "+" : ""}
{scores.econ.toFixed(1)} · social{" "}
{scores.soc >= 0 ? "+" : ""}
{scores.soc.toFixed(1)}
</div>
</div>
<p
style={{
color: COLORS.parchmentDim,
fontSize: 14,
lineHeight: 1.6,
textAlign: "center",
margin: "14px auto 24px",
maxWidth: 580,
}}
>
{top.desc}
</p>
<div
style={{
borderTop: `1px solid ${COLORS.rule}`,
paddingTop: 18,
}}
>
<div
style={{
fontFamily: "Space Mono, monospace",
fontSize: 11,
letterSpacing: 2,
color: COLORS.brass,
marginBottom: 10,
}}
>
ALSO NEARBY
</div>
{runnersUp.map((result) => (
<div
key={result.name}
style={{
marginBottom: 14,
}}
>
<div
style={{
fontFamily: "Fraunces, serif",
fontWeight: 600,
fontSize: 16,
}}
>
{result.name}
</div>
<div
style={{
color: COLORS.parchmentDim,
fontSize: 13,
lineHeight: 1.5,
}}
>
{result.desc}
</div>
</div>
))}
</div>
<button
type="button"
onClick={restart}
style={{
marginTop: 20,
width: "100%",
background: "transparent",
color: COLORS.brass,
border: `1px solid ${COLORS.brassDim}`,
borderRadius: 4,
padding: "12px",
fontFamily: "Space Mono, monospace",
fontSize: 12,
letterSpacing: 1,
cursor: "pointer",
}}
>
RETAKE
</button>
</div>
)}
</div>
</div>
);
}
