138 lines
4.6 KiB
TypeScript
138 lines
4.6 KiB
TypeScript
import { useState } from "react";
|
|
import { Card } from "./ui/card";
|
|
import { Button } from "./ui/button";
|
|
import { Cloud, HelpCircle, Edit2, Check, X } from "lucide-react";
|
|
import { Input, Label } from "./ui";
|
|
|
|
export function CloudComponent() {
|
|
const [domainValue, setDomainValue] = useState("cloud.payne.io");
|
|
const [internalDomainValue, setInternalDomainValue] = useState(
|
|
"internal.cloud.payne.io"
|
|
);
|
|
|
|
const [editingDomains, setEditingDomains] = useState(false);
|
|
|
|
const [tempDomain, setTempDomain] = useState(domainValue);
|
|
const [tempInternalDomain, setTempInternalDomain] =
|
|
useState(internalDomainValue);
|
|
|
|
const handleDomainsEdit = () => {
|
|
setTempDomain(domainValue);
|
|
setTempInternalDomain(internalDomainValue);
|
|
setEditingDomains(true);
|
|
};
|
|
|
|
const handleDomainsSave = () => {
|
|
setDomainValue(tempDomain);
|
|
setInternalDomainValue(tempInternalDomain);
|
|
setEditingDomains(false);
|
|
};
|
|
|
|
const handleDomainsCancel = () => {
|
|
setTempDomain(domainValue);
|
|
setTempInternalDomain(internalDomainValue);
|
|
setEditingDomains(false);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card className="p-6">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="p-2 bg-primary/10 rounded-lg">
|
|
<Cloud className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-semibold">Cloud Configuration</h2>
|
|
<p className="text-muted-foreground">
|
|
Configure top-level cloud settings and domains
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* Domains Section */}
|
|
<Card className="p-4 border-l-4 border-l-green-500">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h3 className="font-medium">Domain Configuration</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Public and internal domain settings
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm">
|
|
<HelpCircle className="h-4 w-4" />
|
|
</Button>
|
|
{!editingDomains && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleDomainsEdit}
|
|
>
|
|
<Edit2 className="h-4 w-4 mr-1" />
|
|
Edit
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{editingDomains ? (
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label htmlFor="domain-edit">Public Domain</Label>
|
|
<Input
|
|
id="domain-edit"
|
|
value={tempDomain}
|
|
onChange={(e) => setTempDomain(e.target.value)}
|
|
placeholder="example.com"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="internal-domain-edit">Internal Domain</Label>
|
|
<Input
|
|
id="internal-domain-edit"
|
|
value={tempInternalDomain}
|
|
onChange={(e) => setTempInternalDomain(e.target.value)}
|
|
placeholder="internal.example.com"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" onClick={handleDomainsSave}>
|
|
<Check className="h-4 w-4 mr-1" />
|
|
Save
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleDomainsCancel}
|
|
>
|
|
<X className="h-4 w-4 mr-1" />
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label>Public Domain</Label>
|
|
<div className="mt-1 p-2 bg-muted rounded-md font-mono text-sm">
|
|
{domainValue}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label>Internal Domain</Label>
|
|
<div className="mt-1 p-2 bg-muted rounded-md font-mono text-sm">
|
|
{internalDomainValue}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|