in projects/deliberation_at_scale/packages/frontend/components/RoomOutcome.tsx [77:116]
content: _(msg`Pass`),
icon: faTimes,
optionType: OpinionOptionType.Wrong,
},
];
}
}, [type, _]);
const hasOpinionOptions = (opinionOptions.length > 0);
const formattedContent = content?.trim();
// handle updates from the database which should reset the optimistic selected option
useEffect(() => {
if (existingOpinion && existingOpinion.option_type === selectedOpinionOptionType) {
setSelectedOpinionOptionType(null);
}
}, [existingOpinion, selectedOpinionOptionType]);
if (!outcome) {
return null;
}
return (
<motion.div
layoutId={outcomeId}
className="gap-2 md:gap-4 flex flex-col items-start"
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
>
<Pill icon={statementSolid} className="border-black hidden md:inline-flex">{title}</Pill>
<span className="md:hidden font-bold">{title}:</span>
<ReactMarkdown>{formattedContent}</ReactMarkdown>
{hasOpinionOptions && (
<div className={classNames(
"flex gap-1 md:gap-2 w-full flex-wrap",
variant === "compact" && "flex-row",
variant === "spacious" && "flex-col",
variant === "spacious" && "flex-col"
)}>
{opinionOptions.map((option) => {