denshooter
d8001fc2c4
All checks were successful
Dev Deployment (Zero Downtime) / deploy-dev (push) Successful in 13m7s
- Position banner at top-left instead of bottom-right - Make banner more compact to reduce visual clutter - Avoids overlap with ActivityFeed (bottom-right) and ChatWidget (bottom-left) - Smaller, cleaner design that doesn't interfere with content
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion, AnimatePresence } 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 (
|
|
<AnimatePresence>
|
|
<motion.div
|
|
initial={{ scale: 0, opacity: 0, x: -20, y: -20 }}
|
|
animate={{ scale: 1, opacity: 1, x: 0, y: 0 }}
|
|
exit={{ scale: 0, opacity: 0 }}
|
|
transition={{ type: "spring", damping: 20, stiffness: 300 }}
|
|
className="fixed z-50 max-w-xs"
|
|
style={{
|
|
top: '1rem',
|
|
left: '1rem',
|
|
bottom: 'auto',
|
|
right: 'auto'
|
|
}}
|
|
>
|
|
<div className="bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 text-white rounded-lg shadow-2xl border-2 border-white/20 backdrop-blur-sm overflow-hidden">
|
|
{/* Compact Header with Close */}
|
|
<div className="px-3 py-2 flex items-center justify-between gap-2">
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|
<AlertTriangle className="w-4 h-4 animate-pulse flex-shrink-0" />
|
|
<span className="font-bold text-xs uppercase tracking-wide truncate">
|
|
🧪 Test Environment
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsVisible(false)}
|
|
className="p-1 hover:bg-white/20 rounded transition-colors flex-shrink-0"
|
|
aria-label="Close banner"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Compact Content */}
|
|
<div className="px-3 pb-2">
|
|
<p className="text-xs text-white/95 leading-tight">
|
|
Not production-ready. Data may be unstable.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
}
|