- Copy React app structure from sample_interface/src/ - Copy package.json, vite.config.ts, postcss.config.mjs - Copy guidelines/ design system
79 lines
2.7 KiB
TypeScript
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>
|
|
);
|
|
}
|