From 0d44ebee1712a8ca0e9b70d0d97d6fff43897a73 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Fri, 9 Jan 2026 14:54:16 +0100
Subject: [PATCH] feat: Add staging banner to dev/test environment

- Add StagingBanner component that displays on dev/staging/test domains
- Shows warning that site is not production-ready
- Automatically detects staging environment via hostname or env vars
- Dismissible banner with smooth animations
- Only shows on dev.dk0.dev or other test domains
---
 app/layout.tsx               |  2 ++
 components/StagingBanner.tsx | 62 ++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 components/StagingBanner.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 984a471..09d9f23 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,6 +7,7 @@ import { AnalyticsProvider } from "@/components/AnalyticsProvider";
 import { ClientOnly } from "./components/ClientOnly";
 import BackgroundBlobsClient from "./components/BackgroundBlobsClient";
 import ChatWidget from "./components/ChatWidget";
+import { StagingBanner } from "@/components/StagingBanner";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -33,6 +34,7 @@ export default function RootLayout({
         <AnalyticsProvider>
           <ToastProvider>
             <ClientOnly>
+              <StagingBanner />
               <BackgroundBlobsClient />
             </ClientOnly>
             <div className="relative z-10">{children}</div>
diff --git a/components/StagingBanner.tsx b/components/StagingBanner.tsx
new file mode 100644
index 0000000..42a0f5b
--- /dev/null
+++ b/components/StagingBanner.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { AlertTriangle, X } from 'lucide-react';
+
+export function StagingBanner() {
+  const [isVisible, setIsVisible] = React.useState(true);
+  const [isStaging, setIsStaging] = React.useState(false);
+  
+  // Check if we're in staging/dev environment (client-side check)
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const hostname = window.location.hostname;
+      const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || '';
+      
+      const staging = 
+        hostname.includes('dev') ||
+        hostname.includes('staging') ||
+        hostname.includes('test') ||
+        baseUrl.includes('dev') ||
+        baseUrl.includes('staging') ||
+        baseUrl.includes('test');
+      
+      setIsStaging(staging);
+    }
+  }, []);
+
+  if (!isStaging || !isVisible) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -100, opacity: 0 }}
+      className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 text-white shadow-lg"
+    >
+      <div className="container mx-auto px-4 py-2 md:py-3 flex items-center justify-between gap-4">
+            <div className="flex items-center gap-3">
+          <AlertTriangle className="w-5 h-5 animate-pulse flex-shrink-0" />
+          <div className="flex-1 min-w-0">
+            <p className="font-bold text-sm md:text-base">
+              🧪 TEST / DEVELOPMENT VERSION
+            </p>
+            <p className="text-xs md:text-sm text-white/90">
+              This is a staging environment. Not production-ready. Data may be unstable.
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="p-1 hover:bg-white/20 rounded transition-colors"
+          aria-label="Close banner"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </motion.div>
+  );
+}