30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface CyberPanelProps {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const CyberPanel: React.FC<CyberPanelProps> = ({ children, className = "" }) => (
|
|
<div className={`glass-holo p-1 relative group ${className}`}>
|
|
{/* Decorative Corners */}
|
|
<svg className="absolute top-0 left-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M2 22V2H22" />
|
|
</svg>
|
|
<svg className="absolute top-0 right-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M22 22V2H2" />
|
|
</svg>
|
|
<svg className="absolute bottom-0 left-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M2 2V22H22" />
|
|
</svg>
|
|
<svg className="absolute bottom-0 right-0 w-6 h-6 text-neon-blue opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M22 2V22H2" />
|
|
</svg>
|
|
|
|
{/* Inner Content */}
|
|
<div className="bg-slate-950/40 backdrop-blur-md h-full w-full p-4 relative z-10 clip-tech border border-white/5">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|