115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "./ui/card";
|
|
import { ConfigEditor } from "./ConfigEditor";
|
|
import { Button, Input, Label } from "./ui";
|
|
import { Check, Edit2, HelpCircle, X } from "lucide-react";
|
|
|
|
export function Advanced() {
|
|
const [upstreamValue, setUpstreamValue] = useState("https://mywildcloud.org");
|
|
const [editingUpstream, setEditingUpstream] = useState(false);
|
|
const [tempUpstream, setTempUpstream] = useState(upstreamValue);
|
|
const handleUpstreamEdit = () => {
|
|
setTempUpstream(upstreamValue);
|
|
setEditingUpstream(true);
|
|
};
|
|
|
|
const handleUpstreamSave = () => {
|
|
setUpstreamValue(tempUpstream);
|
|
setEditingUpstream(false);
|
|
};
|
|
|
|
const handleUpstreamCancel = () => {
|
|
setTempUpstream(upstreamValue);
|
|
setEditingUpstream(false);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Advanced Configuration</CardTitle>
|
|
<CardDescription>
|
|
Advanced settings and system configuration options
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div>
|
|
<h3 className="text-sm font-medium mb-2">
|
|
Configuration Management
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Edit the raw YAML configuration file directly. This provides full
|
|
access to all configuration options.
|
|
</p>
|
|
<ConfigEditor />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
{/* Upstream Section */}
|
|
<Card className="p-4 border-l-4 border-l-blue-500">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 className="font-medium">Upstream Configuration</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
External service endpoint
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm">
|
|
<HelpCircle className="h-4 w-4" />
|
|
</Button>
|
|
{!editingUpstream && (
|
|
<Button variant="outline" size="sm" onClick={handleUpstreamEdit}>
|
|
<Edit2 className="h-4 w-4 mr-1" />
|
|
Edit
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{editingUpstream ? (
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label htmlFor="upstream-edit">Upstream URL</Label>
|
|
<Input
|
|
id="upstream-edit"
|
|
value={tempUpstream}
|
|
onChange={(e) => setTempUpstream(e.target.value)}
|
|
placeholder="https://example.com"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" onClick={handleUpstreamSave}>
|
|
<Check className="h-4 w-4 mr-1" />
|
|
Save
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleUpstreamCancel}
|
|
>
|
|
<X className="h-4 w-4 mr-1" />
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Label>Upstream URL</Label>
|
|
<div className="mt-1 p-2 bg-muted rounded-md font-mono text-sm">
|
|
{upstreamValue}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|