File size: 3,342 Bytes
90b123f |
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 |
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>
)
} |