SnapOtter/apps/demo/src/demo-banner.tsx

import { useState } from "react";

export function DemoBanner() {
  const [dismissed, setDismissed] = useState(false);

  if (dismissed) return null;

  return (
    <div className="relative z-[9999] flex items-center justify-center gap-3 bg-blue-600 px-4 py-2 text-sm text-white">
      <span>
        This is a live demo. Processing is disabled.{" "}
        <a
          href="https://github.com/snapotter-hq/SnapOtter"
          target="_blank"
          rel="noopener noreferrer"
          className="font-semibold underline underline-offset-2 hover:text-blue-100"
        >
          Self-host SnapOtter
        </a>{" "}
        for full functionality.
      </span>
      <button
        type="button"
        onClick={() => setDismissed(true)}
        className="ms-2 shrink-0 rounded px-1.5 py-0.5 text-xs font-medium hover:bg-blue-700"
        aria-label="Dismiss banner"
      >
        Dismiss
      </button>
    </div>
  );
}