Spaces:
Sleeping
Sleeping
import React, { useState, useEffect } from 'react' | |
import { Button } from "@/components/ui/button" | |
import { Slider } from "@/components/ui/slider" | |
import { Progress } from "@/components/ui/progress" | |
import { ChevronsUpDown, Zap, RefreshCw } from "lucide-react" | |
export default function Component() { | |
const [energy, setEnergy] = useState(50) | |
const [timeCoordinate, setTimeCoordinate] = useState(2023) | |
const [isActivated, setIsActivated] = useState(false) | |
const [stabilityLevel, setStabilityLevel] = useState(100) | |
useEffect(() => { | |
if (isActivated) { | |
const interval = setInterval(() => { | |
setStabilityLevel((prev) => Math.max(0, prev - Math.random() * 5)) | |
}, 1000) | |
return () => clearInterval(interval) | |
} | |
}, [isActivated]) | |
const handleActivate = () => { | |
setIsActivated(!isActivated) | |
if (!isActivated) { | |
setStabilityLevel(100) | |
} | |
} | |
return ( | |
<div className="w-full max-w-4xl mx-auto p-6 bg-black rounded-xl shadow-2xl text-white"> | |
<h2 className="text-3xl font-bold mb-6 text-center text-purple-400">Crystallized Quantum Physics Matrix Time Machine</h2> | |
<div className="grid grid-cols-2 gap-6 mb-6"> | |
<div className="space-y-4"> | |
<label className="block text-sm font-medium">Quantum Energy Level</label> | |
<Slider | |
value={[energy]} | |
onValueChange={(value) => setEnergy(value[0])} | |
max={100} | |
step={1} | |
/> | |
<div className="text-right">{energy}%</div> | |
</div> | |
<div className="space-y-4"> | |
<label className="block text-sm font-medium">Time Coordinate</label> | |
<div className="flex items-center space-x-2"> | |
<Button variant="outline" size="icon" onClick={() => setTimeCoordinate(prev => prev - 1)}> | |
<ChevronsUpDown className="h-4 w-4" /> | |
</Button> | |
<input | |
type="number" | |
value={timeCoordinate} | |
onChange={(e) => setTimeCoordinate(parseInt(e.target.value))} | |
className="flex-1 bg-gray-800 text-white px-3 py-2 rounded-md" | |
/> | |
<Button variant="outline" size="icon" onClick={() => setTimeCoordinate(prev => prev + 1)}> | |
<ChevronsUpDown className="h-4 w-4 rotate-180" /> | |
</Button> | |
</div> | |
</div> | |
</div> | |
<div className="mb-6"> | |
<label className="block text-sm font-medium mb-2">Matrix Stability</label> | |
<Progress value={stabilityLevel} className="h-2" /> | |
<div className="text-right mt-1">{stabilityLevel.toFixed(2)}%</div> | |
</div> | |
<div className="flex justify-center space-x-4"> | |
<Button | |
variant={isActivated ? "destructive" : "default"} | |
onClick={handleActivate} | |
className="w-40" | |
> | |
{isActivated ? "Deactivate" : "Activate"} | |
<Zap className="ml-2 h-4 w-4" /> | |
</Button> | |
<Button variant="outline" onClick={() => setStabilityLevel(100)} disabled={!isActivated}> | |
Restabilize | |
<RefreshCw className="ml-2 h-4 w-4" /> | |
</Button> | |
</div> | |
<div className="mt-6 text-center text-sm text-gray-400"> | |
Warning: Temporal paradoxes may occur. Use at your own risk. | |
</div> | |
</div> | |
) | |
} |