Spaces:
Running
Running
File size: 5,445 Bytes
31eb5de ad31128 31eb5de ad31128 31eb5de ad31128 31eb5de ad31128 31eb5de |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
'use client'
import React, { useEffect, useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Power } from '@phosphor-icons/react'
interface SystemPowerOverlayProps {
state: 'active' | 'sleep' | 'restart' | 'shutdown'
onWake: () => void
onRestartComplete: () => void
}
export function SystemPowerOverlay({ state, onWake, onRestartComplete }: SystemPowerOverlayProps) {
const [showPowerButton, setShowPowerButton] = useState(false)
// Handle Sleep Wake
useEffect(() => {
if (state === 'sleep') {
// Small delay to prevent the click that triggered sleep from immediately waking it
const timer = setTimeout(() => {
const handleWake = () => onWake()
window.addEventListener('keydown', handleWake)
window.addEventListener('mousedown', handleWake)
window.addEventListener('touchstart', handleWake)
}, 500)
return () => {
clearTimeout(timer)
const handleWake = () => onWake()
window.removeEventListener('keydown', handleWake)
window.removeEventListener('mousedown', handleWake)
window.removeEventListener('touchstart', handleWake)
}
}
}, [state, onWake])
// Handle Restart
useEffect(() => {
if (state === 'restart') {
const timer = setTimeout(() => {
onRestartComplete()
}, 4000)
return () => clearTimeout(timer)
}
}, [state, onRestartComplete])
// Handle Shutdown
useEffect(() => {
if (state === 'shutdown') {
setShowPowerButton(false)
const timer = setTimeout(() => {
setShowPowerButton(true)
}, 3000)
return () => clearTimeout(timer)
}
}, [state])
if (state === 'active') return null
return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.8 }}
className="fixed inset-0 z-[9999] bg-black flex items-center justify-center text-white cursor-none"
>
{state === 'sleep' && (
<div className="w-full h-full bg-black" />
)}
{state === 'restart' && (
<div className="flex flex-col items-center gap-8">
<div className="w-12 h-12 border-4 border-white/20 border-t-white rounded-full animate-spin" />
</div>
)}
{state === 'shutdown' && (
<div className="flex flex-col items-center w-full h-full justify-center cursor-auto bg-black">
<AnimatePresence mode='wait'>
{!showPowerButton ? (
<motion.div
key="shutdown-text"
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 1.05, filter: 'blur(10px)' }}
transition={{ duration: 1 }}
className="text-center"
>
<div className="w-24 h-24 mx-auto mb-8 bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl flex items-center justify-center shadow-[0_0_50px_rgba(124,58,237,0.5)]">
<span className="text-white font-bold text-4xl">R</span>
</div>
<div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin mx-auto" />
</motion.div>
) : (
<motion.button
key="power-button"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
onClick={onWake}
className="flex flex-col items-center gap-6 group cursor-pointer"
>
<div className="relative">
<div className="absolute inset-0 bg-white/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<Power size={80} weight="thin" className="text-white/50 group-hover:text-white transition-colors duration-300 relative z-10" />
</div>
<span className="text-white/30 text-xs tracking-[0.2em] group-hover:text-white/80 transition-colors duration-300">SYSTEM OFF</span>
</motion.button>
)}
</AnimatePresence>
</div>
)}
</motion.div>
</AnimatePresence>
)
}
|