193 lines
9.8 KiB
TypeScript
193 lines
9.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Slider } from "@/components/ui/slider"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { Settings, Volume2, FlashlightIcon as Brightness4, Wifi, Battery } from "lucide-react"
|
|
|
|
export default function ControlPanel() {
|
|
const [volume, setVolume] = useState([75])
|
|
const [brightness, setBrightness] = useState([60])
|
|
const [temperature, setTemperature] = useState([22])
|
|
const [serverName, setServerName] = useState("Production Server")
|
|
const [apiKey, setApiKey] = useState("")
|
|
const [maxConnections, setMaxConnections] = useState([100])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-6">
|
|
<div className="mx-auto max-w-4xl space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<Settings className="h-8 w-8 text-slate-700" />
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-900">Control Panel</h1>
|
|
<p className="text-slate-600">Manage your system settings and configurations</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{/* System Controls */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Volume2 className="h-5 w-5" />
|
|
System Controls
|
|
</CardTitle>
|
|
<CardDescription>Adjust audio, display, and system preferences</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="volume">Volume: {volume[0]}%</Label>
|
|
<Slider id="volume" value={volume} onValueChange={setVolume} max={100} step={1} className="w-full" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="brightness">
|
|
<Brightness4 className="inline h-4 w-4 mr-1" />
|
|
Brightness: {brightness[0]}%
|
|
</Label>
|
|
<Slider
|
|
id="brightness"
|
|
value={brightness}
|
|
onValueChange={setBrightness}
|
|
max={100}
|
|
step={1}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="temperature">Temperature: {temperature[0]}°C</Label>
|
|
<Slider
|
|
id="temperature"
|
|
value={temperature}
|
|
onValueChange={setTemperature}
|
|
min={16}
|
|
max={30}
|
|
step={0.5}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Server Configuration */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Wifi className="h-5 w-5" />
|
|
Server Configuration
|
|
</CardTitle>
|
|
<CardDescription>Configure server settings and API access</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="server-name">Server Name</Label>
|
|
<Input
|
|
id="server-name"
|
|
value={serverName}
|
|
onChange={(e) => setServerName(e.target.value)}
|
|
placeholder="Enter server name"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="api-key">API Key</Label>
|
|
<Input
|
|
id="api-key"
|
|
type="password"
|
|
value={apiKey}
|
|
onChange={(e) => setApiKey(e.target.value)}
|
|
placeholder="Enter API key"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="connections">Max Connections: {maxConnections[0]}</Label>
|
|
<Slider
|
|
id="connections"
|
|
value={maxConnections}
|
|
onValueChange={setMaxConnections}
|
|
min={10}
|
|
max={500}
|
|
step={10}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Status Dashboard */}
|
|
<Card className="md:col-span-2">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Battery className="h-5 w-5" />
|
|
System Status
|
|
</CardTitle>
|
|
<CardDescription>Current system metrics and status indicators</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium">CPU Usage</Label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 bg-slate-200 rounded-full h-2">
|
|
<div className="bg-blue-500 h-2 rounded-full w-3/4"></div>
|
|
</div>
|
|
<Badge variant="secondary">75%</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium">Memory</Label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 bg-slate-200 rounded-full h-2">
|
|
<div className="bg-green-500 h-2 rounded-full w-1/2"></div>
|
|
</div>
|
|
<Badge variant="secondary">8.2GB</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium">Storage</Label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 bg-slate-200 rounded-full h-2">
|
|
<div className="bg-orange-500 h-2 rounded-full w-5/6"></div>
|
|
</div>
|
|
<Badge variant="secondary">456GB</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium">Network</Label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 bg-slate-200 rounded-full h-2">
|
|
<div className="bg-purple-500 h-2 rounded-full w-1/3"></div>
|
|
</div>
|
|
<Badge variant="outline" className="text-green-600 border-green-600">
|
|
Online
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="my-6" />
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button>Apply Settings</Button>
|
|
<Button variant="outline">Reset to Default</Button>
|
|
<Button variant="ghost">Export Config</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|