Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up settings dialog look

Browse Source
This commit is contained in:
Abi Raja 2024-05-31 13:51:43 -04:00
parent 1f9c5b2c80
commit 8e579e425e
1 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/components/SettingsDialog.tsx
View File

@ -49,7 +49,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Label htmlFor="image-generation"> <Label htmlFor="image-generation">
<div>DALL-E Placeholder Image Generation</div> <div>DALL-E Placeholder Image Generation</div>
<div className="font-light mt-2"> <div className="font-light mt-2 text-xs">
More fun with it but if you want to save money, turn it off. More fun with it but if you want to save money, turn it off.
</div> </div>
</Label> </Label>
@ -64,29 +64,31 @@ function SettingsDialog({ settings, setSettings }: Props) {
} }
/> />
</div> </div>
<div className="flex flex-col space-y-4"> <div className="flex flex-col space-y-6">
<Label htmlFor="openai-api-key"> <div>
<div>OpenAI API key</div> <Label htmlFor="openai-api-key">
<div className="font-light mt-2 leading-relaxed"> <div>OpenAI API key</div>
Only stored in your browser. Never stored on servers. Overrides <div className="font-light mt-1 mb-2 text-xs leading-relaxed">
your .env config. Only stored in your browser. Never stored on servers. Overrides
</div> your .env config.
</Label> </div>
</Label>
<Input <Input
id="openai-api-key" id="openai-api-key"
placeholder="OpenAI API key" placeholder="OpenAI API key"
value={settings.openAiApiKey || ""} value={settings.openAiApiKey || ""}
onChange={(e) => onChange={(e) =>
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
openAiApiKey: e.target.value, openAiApiKey: e.target.value,
})) }))
} }
/> />
</div>
{!IS_RUNNING_ON_CLOUD && ( {!IS_RUNNING_ON_CLOUD && (
<> <div>
<Label htmlFor="openai-api-key"> <Label htmlFor="openai-api-key">
<div>OpenAI Base URL (optional)</div> <div>OpenAI Base URL (optional)</div>
<div className="font-light mt-2 leading-relaxed"> <div className="font-light mt-2 leading-relaxed">
@ -105,28 +107,30 @@ function SettingsDialog({ settings, setSettings }: Props) {
})) }))
} }
/> />
</> </div>
)} )}
<Label htmlFor="anthropic-api-key"> <div>
<div>Anthropic API key</div> <Label htmlFor="anthropic-api-key">
<div className="font-light mt-2 leading-relaxed"> <div>Anthropic API key</div>
Only stored in your browser. Never stored on servers. Overrides <div className="font-light mt-1 text-xs leading-relaxed">
your .env config. Only stored in your browser. Never stored on servers. Overrides
</div> your .env config.
</Label> </div>
</Label>
<Input <Input
id="anthropic-api-key" id="anthropic-api-key"
placeholder="Anthropic API key" placeholder="Anthropic API key"
value={settings.anthropicApiKey || ""} value={settings.anthropicApiKey || ""}
onChange={(e) => onChange={(e) =>
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
anthropicApiKey: e.target.value, anthropicApiKey: e.target.value,
})) }))
} }
/> />
</div>
<Accordion type="single" collapsible className="w-full"> <Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1"> <AccordionItem value="item-1">