Function CodePreview

docs/src/components/DynamicColorTheme.tsx:143–182

({
  theme,
  children,
}: {
  theme: Record<string, any>;
  children: ReactNode | undefined;
})

};

const CodePreview = ({
  theme,
  children,
}: {
  theme: Record<string, any>;
  children: ReactNode | undefined;
}) => {
  const [copied, setCopied] = useState(false);

  const getColorScheme = () => {
    return JSON.stringify(
      {
        colors: theme,
      },
      null,
      2
    );
  };

  const onCopy = () => {
    navigator.clipboard.writeText(getColorScheme());
    setCopied(true);

    setTimeout(() => setCopied(false), 1000);
  };

  return (
    <div>
      <div className="color-picker-schema-copy-header">
        <h4>{children}</h4>
        <button onClick={onCopy} className="color-picker-action-button">
          {copied ? 'copied' : 'copy'}
        </button>
      </div>
      <pre>
        <code className="language-json">{getColorScheme()}</code>
      </pre>
    </div>
  );
};

let uniqColorKey = 0;