Function BrowserPreview

web/src/components/BrowserPreview.tsx:12–159

({
  show,
  className,
  url = 'http://localhost:3000',
  variant = 'before',
}: BrowserPreviewProps)

}

const BrowserPreview = ({
  show,
  className,
  url = 'http://localhost:3000',
  variant = 'before',
}: BrowserPreviewProps) => {
  return (
    <div
      className={cn(
        'rounded-lg bg-white dark:bg-gray-900 flex flex-col flex-1',
        className,
      )}
    >
      {/* 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">
            {url}
          </div>
        </div>
      </div>
      {/* Content area */}
      <div className="flex-1 border rounded-b-lg border-gray-200 dark:border-gray-700 p-6">
        {variant === 'before' ? (
          <div
            className="bg-gray-800 h-full w-full"
            style={{ backgroundColor: '#222' }}
          >
            <div className="text-left p-6">
              <h1 className="text-xl text-white mb-4 font-mono">Weather App</h1>

              <div
                className="p-4 mb-4 border border-gray-700"
                style={{ backgroundColor: '#f0f0f0' }}
              >
                <p className="text-red-600 mb-3 font-medium font-mono">
                  Error: API Key Missing
                </p>
                <p className="text-gray-800 text-sm mb-4 font-mono">
                  Please configure the OpenWeatherMap API key to display weather
                  information.
                </p>
              </div>

              <button className="px-4 py-1 bg-gray-700 border border-gray-600 text-gray-300 text-sm font-mono">
                Configure API
              </button>
            </div>
          </div>
        ) : (
          <div className="bg-gradient-to-br from-sky-100 to-indigo-100 dark:from-sky-900 dark:to-indigo-900 rounded-lg border border-blue-200 dark:border-blue-800 p-6 shadow-2xl">