Function CodeOptions

src/components/code/CodeOptions.jsx:31–76

({ children })

);

const CodeOptions = ({ children }) => {
  const { languagePreset, setLanguagePreset, stylePreset, setStylePreset } = useOptions();
  const currentLang = languagePreset || 'JS';

  const buckets = { JS: { css: null, tailwind: null }, TS: { css: null, tailwind: null } };
  Children.forEach(children, child => {
    if (!child) return;
    if (child.type === CSS) buckets.JS.css = child;
    if (child.type === Tailwind) buckets.JS.tailwind = child;
    if (child.type === TSCSS) buckets.TS.css = child;
    if (child.type === TSTailwind) buckets.TS.tailwind = child;
  });

  const renderContent = variant => {
    const node = currentLang === 'JS' ? buckets.JS[variant] : buckets.TS[variant];
    return node?.props?.children ? node : UNSUPPORTED;
  };

  const styleVariant = stylePreset === 'TW' ? 'tailwind' : 'css';

  return (
    <Box mt={0} w="100%">
      <Flex mb={2} w="100%" alignItems="center" gap={2}>
        <IconSelect
          collection={LANG_ITEMS}
          value={currentLang}
          onChange={setLanguagePreset}
          iconMap={ICON_MAP}
          labelMap={LABEL_MAP}
          colorMap={COLOR_MAP}
          width="150px"
        />
        <IconSelect
          collection={STYLE_ITEMS}
          value={stylePreset}
          onChange={setStylePreset}
          iconMap={ICON_MAP}
          labelMap={LABEL_MAP}
          colorMap={COLOR_MAP}
          width="135px"
        />
      </Flex>
      <Box>{renderContent(styleVariant)}</Box>
    </Box>
  );
};

export default CodeOptions;