\n {label &&

{label}

}\n \n

{emojis.lowEmoji}

\n {buttons}\n

{emojis.highEmoji}

\n \n \n

\n );\n}\n\n/**\n * A styled version of EmojiScoreSelector that uses className props for styling\n * Made to be included in the Component Garden\n */\nexport function StyledEmojiScoreSelector(props) {\n return (\n

\n {props.label && (\n

{props.label}

\n )}\n \n

{props.emojis.lowEmoji}

\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((buttonValue) => {\n let bgColor = \"bg-gray-100\";\n let textColor = \"text-gray-700\";\n \n if (buttonValue === props.value) {\n if (props.isEffort) {\n // For effort, lower is better\n if (buttonValue <= 3) {\n bgColor = \"bg-green-500\";\n textColor = \"text-white\";\n } else if (buttonValue <= 7) {\n bgColor = \"bg-yellow-500\";\n textColor = \"text-white\";\n } else {\n bgColor = \"bg-red-500\";\n textColor = \"text-white\";\n }\n } else {\n // For payoff, higher is better\n if (buttonValue >= 8) {\n bgColor = \"bg-green-500\";\n textColor = \"text-white\";\n } else if (buttonValue >= 4) {\n bgColor = \"bg-yellow-500\";\n textColor = \"text-white\";\n } else {\n bgColor = \"bg-red-500\";\n textColor = \"text-white\";\n }\n }\n }\n \n return (\n props.onChange && props.onChange(buttonValue)}\n >\n {buttonValue}\n \n );\n })}\n

{props.emojis.highEmoji}

\n \n \n

\n );\n}\n\nexport default EmojiScoreSelector;","deleted","label",[168,169,152],"shared","components","permalink","https://www.val.town/x/dcm31/charBuildSuperapp/code/shared/components/EmojiScoreSelector.tsx","extension","tsx","actionData","errors"]