crystalai/The-Animus-Computer

1import React, { useState, useEffect } from 'react'2import { Button } from "@/components/ui/button"3import { Slider } from "@/components/ui/slider"4import { Progress } from "@/components/ui/progress"5import { ChevronsUpDown, Zap, RefreshCw } from "lucide-react"6 7export default function Component() {8  const [energy, setEnergy] = useState(50)9  const [timeCoordinate, setTimeCoordinate] = useState(2023)10  const [isActivated, setIsActivated] = useState(false)11  const [stabilityLevel, setStabilityLevel] = useState(100)12 13  useEffect(() => {14    if (isActivated) {15      const interval = setInterval(() => {16        setStabilityLevel((prev) => Math.max(0, prev - Math.random() * 5))17      }, 1000)18      return () => clearInterval(interval)19    }20  }, [isActivated])21 22  const handleActivate = () => {23    setIsActivated(!isActivated)24    if (!isActivated) {25      setStabilityLevel(100)26    }27  }28 29  return (30    <div className="w-full max-w-4xl mx-auto p-6 bg-black rounded-xl shadow-2xl text-white">31      <h2 className="text-3xl font-bold mb-6 text-center text-purple-400">Crystallized Quantum Physics Matrix Time Machine</h2>32      33      <div className="grid grid-cols-2 gap-6 mb-6">34        <div className="space-y-4">35          <label className="block text-sm font-medium">Quantum Energy Level</label>36          <Slider37            value={[energy]}38            onValueChange={(value) => setEnergy(value[0])}39            max={100}40            step={1}41          />42          <div className="text-right">{energy}%</div>43        </div>44        45        <div className="space-y-4">46          <label className="block text-sm font-medium">Time Coordinate</label>47          <div className="flex items-center space-x-2">48            <Button variant="outline" size="icon" onClick={() => setTimeCoordinate(prev => prev - 1)}>49              <ChevronsUpDown className="h-4 w-4" />50            </Button>51            <input52              type="number"53              value={timeCoordinate}54              onChange={(e) => setTimeCoordinate(parseInt(e.target.value))}55              className="flex-1 bg-gray-800 text-white px-3 py-2 rounded-md"56            />57            <Button variant="outline" size="icon" onClick={() => setTimeCoordinate(prev => prev + 1)}>58              <ChevronsUpDown className="h-4 w-4 rotate-180" />59            </Button>60          </div>61        </div>62      </div>63      64      <div className="mb-6">65        <label className="block text-sm font-medium mb-2">Matrix Stability</label>66        <Progress value={stabilityLevel} className="h-2" />67        <div className="text-right mt-1">{stabilityLevel.toFixed(2)}%</div>68      </div>69      70      <div className="flex justify-center space-x-4">71        <Button 72          variant={isActivated ? "destructive" : "default"}73          onClick={handleActivate}74          className="w-40"75        >76          {isActivated ? "Deactivate" : "Activate"}77          <Zap className="ml-2 h-4 w-4" />78        </Button>79        <Button variant="outline" onClick={() => setStabilityLevel(100)} disabled={!isActivated}>80          Restabilize81          <RefreshCw className="ml-2 h-4 w-4" />82        </Button>83      </div>84      85      <div className="mt-6 text-center text-sm text-gray-400">86        Warning: Temporal paradoxes may occur. Use at your own risk.87      </div>88    </div>89  )90}