Function BrowserPreview

web/src/components/TerminalDemo.tsx:177–230

({
  content,
  showError = false,
  isRainbow = false,
  theme = 'default',
  isLoading = false,
})

}

const BrowserPreview: React.FC<BrowserPreviewProps> = ({
  content,
  showError = false,
  isRainbow = false,
  theme = 'default',
  isLoading = false,
}) => {
  return (
    <div
      className={cn(
        'rounded-lg overflow-hidden w-full flex flex-col min-h-[200px]',
      )}
    >
      <div className="rounded-lg bg-white dark:bg-gray-900 flex flex-col flex-1">
        {/* Browser-like title bar */}
        <div className="bg-gray-100 dark:bg-gray-800 p-2 flex items-center gap-2 border-b border-gray-200 dark:border-gray-700">
          {/* Traffic light circles */}
          <div className="flex gap-1.5">
            <div className="w-3 h-3 rounded-full bg-red-500"></div>
            <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
            <div className="w-3 h-3 rounded-full bg-green-500"></div>
          </div>
          {/* URL bar */}
          <div className="flex-1 ml-2">
            <div className="bg-white dark:bg-gray-700 rounded px-3 py-1 text-sm text-gray-600 dark:text-gray-300 font-mono">
              http://localhost:3000
            </div>
          </div>
        </div>
        {/* Content area */}
        <div
          className={cn(
            'flex-1 border rounded-b-lg border-gray-200 dark:border-gray-700 relative',
            theme === 'light' && 'bg-white',
            theme === 'terminal-y' && 'bg-black',
            theme === 'retro' && 'bg-[#002448]',
          )}
        >
          {isLoading ? (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900 dark:border-gray-100"></div>
            </div>
          ) : (
            <iframe
              srcDoc={getIframeContent(content, showError, isRainbow, theme)}
              className="w-full h-full border-none"
              sandbox="allow-scripts"
            />
          )}
        </div>
      </div>
    </div>
  )
}

interface DemoResponse {
  html: string