'use client' import { useState, useEffect } from 'react' import { usePerformance } from '@/lib/spatial-ui/PerformanceContext' // ============================================================================= // GLASS CARD - Ultra Transparent // ============================================================================= interface GlassCardProps { children: React.ReactNode className?: string onClick?: () => void size?: 'sm' | 'md' | 'lg' delay?: number } export function GlassCard({ children, className = '', onClick, size = 'md', delay = 0 }: GlassCardProps) { const { settings } = usePerformance() const [isVisible, setIsVisible] = useState(false) const [isHovered, setIsHovered] = useState(false) useEffect(() => { const timer = setTimeout(() => setIsVisible(true), delay) return () => clearTimeout(timer) }, [delay]) const sizeClasses = { sm: 'p-4', md: 'p-5', lg: 'p-6' } const blur = settings.enableBlur ? 24 * settings.blurIntensity : 0 return (
0 ? `blur(${blur}px) saturate(180%)` : 'none', WebkitBackdropFilter: blur > 0 ? `blur(${blur}px) saturate(180%)` : 'none', border: '1px solid rgba(255, 255, 255, 0.1)', boxShadow: '0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05)', opacity: isVisible ? 1 : 0, transform: isVisible ? `translateY(0) scale(${isHovered ? 1.01 : 1})` : 'translateY(20px)', transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)', }} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onClick={onClick} > {children}
) } // ============================================================================= // ANALOG CLOCK // ============================================================================= export function AnalogClock() { const [time, setTime] = useState(new Date()) useEffect(() => { const timer = setInterval(() => setTime(new Date()), 1000) return () => clearInterval(timer) }, []) const hours = time.getHours() % 12 const minutes = time.getMinutes() const seconds = time.getSeconds() const hourDeg = (hours * 30) + (minutes * 0.5) const minuteDeg = minutes * 6 const secondDeg = seconds * 6 return (
{[...Array(12)].map((_, i) => (
))}
) } // ============================================================================= // COMPASS // ============================================================================= export function Compass({ direction = 225 }: { direction?: number }) { return (
N S W O
) } // ============================================================================= // BAR CHART // ============================================================================= interface BarChartProps { data: { label: string; value: number; highlight?: boolean }[] maxValue?: number } export function BarChart({ data, maxValue }: BarChartProps) { const max = maxValue || Math.max(...data.map((d) => d.value)) return (
{data.map((item, index) => { const height = (item.value / max) * 100 return (
{item.value}
{item.label}
) })}
) } // ============================================================================= // TEMPERATURE DISPLAY // ============================================================================= export function TemperatureDisplay({ temp, condition }: { temp: number; condition: string }) { const conditionIcons: Record = { sunny: '☀️', cloudy: '☁️', rainy: '🌧️', snowy: '🌨️', partly_cloudy: '⛅' } return (
{conditionIcons[condition] || '☀️'}
{temp} °C

{condition.replace('_', ' ')}

) } // ============================================================================= // PROGRESS RING // ============================================================================= interface ProgressRingProps { progress: number; size?: number; strokeWidth?: number; label: string; value: string; color?: string } export function ProgressRing({ progress, size = 80, strokeWidth = 6, label, value, color = '#a78bfa' }: ProgressRingProps) { const radius = (size - strokeWidth) / 2 const circumference = radius * 2 * Math.PI const offset = circumference - (progress / 100) * circumference return (
{value}

{label}

) } // ============================================================================= // STAT DISPLAY // ============================================================================= export function StatDisplay({ value, unit, label, icon }: { value: string; unit?: string; label: string; icon?: string }) { return (
{icon &&
{icon}
}
{value} {unit && {unit}}

{label}

) } // ============================================================================= // LIST ITEM // ============================================================================= export function ListItem({ icon, title, subtitle, value, delay = 0 }: { icon: string; title: string; subtitle?: string; value?: string; delay?: number }) { const [isVisible, setIsVisible] = useState(false) const [isHovered, setIsHovered] = useState(false) useEffect(() => { const timer = setTimeout(() => setIsVisible(true), delay) return () => clearTimeout(timer) }, [delay]) return (
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >
{icon}

{title}

{subtitle &&

{subtitle}

}
{value && {value}}
) } // ============================================================================= // ACTION BUTTON // ============================================================================= export function ActionButton({ icon, label, primary = false, onClick, delay = 0 }: { icon: string; label: string; primary?: boolean; onClick?: () => void; delay?: number }) { const [isVisible, setIsVisible] = useState(false) const [isPressed, setIsPressed] = useState(false) useEffect(() => { const timer = setTimeout(() => setIsVisible(true), delay) return () => clearTimeout(timer) }, [delay]) return ( ) } // ============================================================================= // QUALITY INDICATOR // ============================================================================= export function QualityIndicator() { const { metrics, forceQuality } = usePerformance() const [isExpanded, setIsExpanded] = useState(false) return (
{isExpanded && (
{(['high', 'medium', 'low'] as const).map((level) => ( ))}
)}
) }