Function CodeExample

app/components/content.tsx:701–775

({
  code,
  id,
  name,
  popoutUrl,
}: {
  code: string;
  id: string;
  name: string;
  popoutUrl?: string;
})

}

function CodeExample({
  code,
  id,
  name,
  popoutUrl,
}: {
  code: string;
  id: string;
  name: string;
  popoutUrl?: string;
}) {
  return (
    <div className="bg-slate-800 text-slate-100 p-3 rounded-md text-sm overflow-x-auto relative">
      <button
        onClick={() => {
          navigator.clipboard.writeText(code);
          const copyBtn = document.querySelector(`#${id}-copy-btn`);
          if (copyBtn) {
            copyBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-500"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
            setTimeout(() => {
              copyBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
            }, 2000);
          }
        }}
        id={`${id}-copy-btn`}
        className="absolute top-2 right-2 p-1 rounded-md hover:bg-slate-700 transition-colors focus:outline-none z-10"
        aria-label="Copy code"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
        </svg>
      </button>
      {popoutUrl && (
        <button
          onClick={() => {
            window.open(popoutUrl);
          }}
          id={`${id}-open-btn`}
          className="absolute top-2 right-8 p-1 rounded-md hover:bg-slate-700 transition-colors focus:outline-none z-10"
          aria-label={`Open ${name}`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"