Function BrickCodeEditor

components/bricks/brick-code-editor.tsx:16–144

({
  brick,
  demo,
  className = '',
}: {
  brick: string;
  demo: string;
  className?: string;
})

  'https://raw.githubusercontent.com/Shipixen/landing-page-bricks/main/templates/landing-page-templates/template';

export const BrickCodeEditor = ({
  brick,
  demo,
  className = '',
}: {
  brick: string;
  demo: string;
  className?: string;
}) => {
  const [copied, setCopied] = useState(false);
  const [failed, setFailed] = useState(false);
  const [loading, setLoading] = useState(false);

  const { formattedCodeString, errorString, getCode } = useCopyBrickCode({
    brick,
    demo,
  });

  const loadCode = useCallback(
    async (signal?: AbortSignal) => {
      if (copied) {
        return false;
      }

      setFailed(false);
      setLoading(true);

      try {
        const code = await getCode(signal);

        if (!code) {
          setFailed(true);
        } else {
          setCopied(true);
          navigator.clipboard.writeText(code);
        }
      } catch (error) {
        console.error(error);
        setFailed(true);
      } finally {
        setLoading(false);
      }

      setTimeout(() => {
        setCopied(false);
        setFailed(false);
      }, 2000);
    },
    [getCode, copied],
  );

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const loadCodeAsync = async () => {
      await loadCode(signal);
    };