denshooter
d40fdf6d22
All checks were successful
Dev Deployment (Zero Downtime) / deploy-dev (push) Successful in 13m7s
- Remove branch-specific variable names (not needed) - Each workflow uses its own default based on branch - Users only need to set general variables, not branch-specific ones - Redesign staging banner as floating box in bottom-right corner - Better UX: doesn't block content, dismissible, modern design
74 lines
2.5 KiB
TypeScript
74 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 bottom-6 right-6 z-50 max-w-sm"
|
|
>
|
|
<div className="bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 text-white rounded-xl shadow-2xl border-2 border-white/20 backdrop-blur-sm overflow-hidden">
|
|
{/* Header */}
|
|
<div className="bg-black/20 px-4 py-2 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className="w-4 h-4 animate-pulse" />
|
|
<span className="font-bold text-xs uppercase tracking-wide">
|
|
Test Environment
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsVisible(false)}
|
|
className="p-1 hover:bg-white/20 rounded transition-colors"
|
|
aria-label="Close banner"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="px-4 py-3">
|
|
<p className="text-sm font-semibold mb-1">
|
|
🧪 Development Version
|
|
</p>
|
|
<p className="text-xs text-white/90 leading-relaxed">
|
|
This is a staging environment. Not production-ready. Data may be unstable.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
}
|