vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UI/UX improvements (#218)

Browse Source
This commit is contained in:
Kerem Yilmaz
2024-04-23 13:54:04 -07:00
committed by GitHub
parent 9b540b9416
commit 550ad65c5d
6 changed files with 220 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
skyvern-frontend/src/routes/settings/Settings.tsx
View File

@@ -1,5 +1,4 @@
import { Label } from "@/components/ui/label";
import { useId } from "react";
import {
Select,
SelectContent,
@@ -8,40 +7,54 @@ import {
SelectValue,
} from "@/components/ui/select";
import { useSettingsStore } from "@/store/SettingsStore";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
function Settings() {
const { environment, organization, setEnvironment, setOrganization } =
useSettingsStore();
const environmentInputId = useId();
const organizationInputId = useId();
return (
<div className="flex flex-col gap-6">
<h1>Settings</h1>
<div className="flex flex-col gap-4">
<Label htmlFor={environmentInputId}>Environment</Label>
<div>
<Select value={environment} onValueChange={setEnvironment}>
<SelectTrigger>
<SelectValue placeholder="Environment" />
</SelectTrigger>
<SelectContent>
<SelectItem value="local">local</SelectItem>
</SelectContent>
</Select>
</div>
<Label htmlFor={organizationInputId}>Organization</Label>
<div>
<Select value={organization} onValueChange={setOrganization}>
<SelectTrigger>
<SelectValue placeholder="Organization" />
</SelectTrigger>
<SelectContent>
<SelectItem value="skyvern">Skyvern</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="flex flex-col gap-8 max-w-5xl mx-auto">
<Card>
<CardHeader className="border-b-2">
<CardTitle className="text-lg">Settings</CardTitle>
<CardDescription>
You can select environment and organization here
</CardDescription>
</CardHeader>
<CardContent className="p-8">
<div className="flex flex-col gap-4">
<div className="flex gap-4 items-center">
<Label className="whitespace-nowrap w-36">Environment</Label>
<Select value={environment} onValueChange={setEnvironment}>
<SelectTrigger>
<SelectValue placeholder="Environment" />
</SelectTrigger>
<SelectContent>
<SelectItem value="local">local</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex gap-4 items-center">
<Label className="whitespace-nowrap w-36">Organization</Label>
<Select value={organization} onValueChange={setOrganization}>
<SelectTrigger>
<SelectValue placeholder="Organization" />
</SelectTrigger>
<SelectContent>
<SelectItem value="skyvern">Skyvern</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</CardContent>
</Card>
</div>
);
}