GlassWindow.jsx•2.99 kB
import React from 'react';
import { motion } from 'framer-motion';
const GlassWindow = ({ children, className = '', maxWidth = '7xl', maxHeight = '6xl' }) => {
// Convert maxWidth to actual Tailwind class
const getMaxWidthClass = (width) => {
const widthMap = {
'sm': 'max-w-sm',
'md': 'max-w-md',
'lg': 'max-w-lg',
'xl': 'max-w-xl',
'2xl': 'max-w-2xl',
'3xl': 'max-w-3xl',
'4xl': 'max-w-4xl',
'5xl': 'max-w-5xl',
'6xl': 'max-w-6xl',
'7xl': 'max-w-7xl',
'full': 'max-w-full'
};
return widthMap[width] || 'max-w-7xl';
};
const getMaxHeightClass = (height) => {
const heightMap = {
'sm': 'max-h-sm',
'md': 'max-h-md',
'lg': 'max-h-lg',
'xl': 'max-h-xl',
'2xl': 'max-h-2xl',
'3xl': 'max-h-3xl',
'4xl': 'max-h-4xl',
'5xl': 'max-h-5xl',
'6xl': 'max-h-6xl',
'full': 'max-h-full'
};
return heightMap[height] || 'max-h-6xl';
};
return (
<div className="glass-window-container bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/20 overflow-hidden">
{/* Background Pattern */}
<div className="fixed inset-0 bg-dots opacity-20 sm:opacity-30 pointer-events-none" />
{/* Glass Window Container */}
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ duration: 0.5, ease: "easeOut" }}
className={`
glass-window-content
relative bg-white/80 backdrop-blur-xl
border border-white/20
rounded-2xl sm:rounded-3xl shadow-xl sm:shadow-2xl shadow-gray-900/10
overflow-hidden
${className}
`}
style={{
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
minHeight: '600px'
}}
>
{/* Glass Window Header */}
<div className="absolute top-0 left-0 right-0 h-12 sm:h-14 bg-gradient-to-r from-white/40 to-white/20 border-b border-white/20 backdrop-blur-sm">
{/* Window Controls */}
<div className="flex items-center h-full px-4 sm:px-6 gap-2 sm:gap-3">
<div className="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-red-400/80 shadow-sm hover:bg-red-500/90 transition-colors" />
<div className="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-yellow-400/80 shadow-sm hover:bg-yellow-500/90 transition-colors" />
<div className="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-green-400/80 shadow-sm hover:bg-green-500/90 transition-colors" />
</div>
</div>
{/* Content Area */}
<div className="pt-12 sm:pt-14 h-full p-3 pb-4">
{children}
</div>
{/* Subtle glow effect */}
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-white/10 via-transparent to-blue-100/20 pointer-events-none" />
</motion.div>
</div>
);
};
export default GlassWindow;