content: _()

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) => {