Files
rtu_v5/v2/src/app/components/views/LevelSettingView.tsx
admin 6a74db1e5c feat(quick-2): initialize v2 project from sample_interface
- Copy React app structure from sample_interface/src/
- Copy package.json, vite.config.ts, postcss.config.mjs
- Copy guidelines/ design system
2026-03-12 12:29:56 +08:00

79 lines
2.7 KiB
TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import { Switch } from "../ui/switch";
import { Gauge } from "lucide-react";
export function LevelSettingView() {
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<Gauge className="w-6 h-6 text-blue-400" />
<h1 className="text-2xl font-bold text-white">Level Setting</h1>
</div>
<Card className="bg-gray-900 border-gray-700">
<CardHeader>
<CardTitle className="text-white">Water Level Configuration</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between p-3 bg-gray-800 rounded">
<Label htmlFor="level-enable" className="text-gray-300">Enable Level Sensor</Label>
<Switch id="level-enable" defaultChecked />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="min-level" className="text-gray-300">Min Level (m)</Label>
<Input
id="min-level"
type="number"
defaultValue="0"
step="0.01"
className="bg-gray-800 border-gray-700 text-white"
/>
</div>
<div className="space-y-2">
<Label htmlFor="max-level" className="text-gray-300">Max Level (m)</Label>
<Input
id="max-level"
type="number"
defaultValue="10"
step="0.01"
className="bg-gray-800 border-gray-700 text-white"
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="warning-level" className="text-gray-300">Warning Level (m)</Label>
<Input
id="warning-level"
type="number"
defaultValue="7.5"
step="0.01"
className="bg-gray-800 border-gray-700 text-white"
/>
</div>
<div className="space-y-2">
<Label htmlFor="critical-level" className="text-gray-300">Critical Level (m)</Label>
<Input
id="critical-level"
type="number"
defaultValue="9.0"
step="0.01"
className="bg-gray-800 border-gray-700 text-white"
/>
</div>
<Button className="w-full bg-blue-600 hover:bg-blue-700">
Save Configuration
</Button>
</CardContent>
</Card>
</div>
);
}