Function CodeExample

src/components/code/CodeExample.jsx:105–182

({ codeObject, componentName })

}

const CodeExample = ({ codeObject, componentName }) => {
  const { tailwind, css, tsTailwind, tsCode, code, usage, dependencies } = codeObject;
  const { props, hasChanges, demoOnlyProps, computedProps } = useComponentPropsContext();

  const dynamicUsage = useMemo(() => {
    if (!usage || !componentName || !props || Object.keys(props).length === 0) return usage;

    const mergedProps = { ...props, ...computedProps };
    return injectPropsIntoCode(usage, mergedProps, {}, componentName, demoOnlyProps);
  }, [usage, props, computedProps, componentName, demoOnlyProps]);

  const renderCssSection = () =>
    css && (
      <>
        <h2 className="demo-title">CSS</h2>
        <CodeHighlighter snippetId="css" language="css" codeString={css} />
      </>
    );

  return (
    <>
      <CliInstallation deps={dependencies} />

      {dynamicUsage && (
        <div>
          <h2 className="demo-title">
            Usage {hasChanges && <span style={{ color: colors.accent, fontSize: '12px' }}>(with your settings)</span>}
          </h2>
          <CodeHighlighter snippetId="usage" language="jsx" codeString={dynamicUsage} />
        </div>
      )}

      {Object.entries(codeObject).map(([name, snippet]) => {
        if (SKIP_KEYS.has(name)) return null;
        if (name === 'usage') return null;

        if (name === 'code' || name === 'tsCode') {
          return (
            <div key={name}>
              <h2 className="demo-title">{name}</h2>
              <CodeOptions>
                {tailwind && (
                  <Tailwind>
                    <CodeHighlighter snippetId="code" language="jsx" codeString={tailwind} />
                  </Tailwind>
                )}
                {code && (
                  <CSS>
                    <CodeHighlighter snippetId="code" language="jsx" codeString={code} />
                    {css && renderCssSection()}
                  </CSS>
                )}
                {tsTailwind && (
                  <TSTailwind>
                    <CodeHighlighter snippetId="code" language="tsx" codeString={tsTailwind} />
                  </TSTailwind>
                )}
                {tsCode && (