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

show output settings at all times

Browse Source
This commit is contained in:
Abi Raja 2023-11-29 04:48:55 -05:00
parent 2ad9780e80
commit 56e6f1f608
2 changed files with 77 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/App.tsx
View File

@ -186,12 +186,13 @@ function App() {
<SettingsDialog settings={settings} setSettings={setSettings} /> <SettingsDialog settings={settings} setSettings={setSettings} />
</div> </div>
{appState === AppState.INITIAL && ( <OutputSettingsSection
<OutputSettingsSection outputSettings={outputSettings}
outputSettings={outputSettings} setOutputSettings={setOutputSettings}
setOutputSettings={setOutputSettings} shouldDisableUpdates={
/> appState === AppState.CODING || appState === AppState.CODE_READY
)} }
/>
{IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />} {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}

133
frontend/src/components/OutputSettingsSection.tsx
View File

@ -81,15 +81,20 @@ function generateDisplayString(settings: OutputSettings) {
interface Props { interface Props {
outputSettings: OutputSettings; outputSettings: OutputSettings;
setOutputSettings: React.Dispatch<React.SetStateAction<OutputSettings>>; setOutputSettings: React.Dispatch<React.SetStateAction<OutputSettings>>;
shouldDisableUpdates?: boolean;
} }
function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) { function OutputSettingsSection({
outputSettings,
setOutputSettings,
shouldDisableUpdates = false,
}: Props) {
const onCSSValueChange = (value: string) => { const onCSSValueChange = (value: string) => {
setOutputSettings((prev) => { setOutputSettings((prev) => {
if (prev.js === JSFrameworkOption.REACT) { if (prev.js === JSFrameworkOption.REACT) {
if (value !== CSSOption.TAILWIND) { if (value !== CSSOption.TAILWIND) {
toast.error( toast.error(
"React only supports Tailwind CSS. Change JS framework to Vanilla to use Bootstrap." 'React only supports Tailwind CSS. Change JS framework to "No Framework" to use Bootstrap.'
); );
} }
return { return {
@ -122,71 +127,73 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
return ( return (
<div className="flex flex-col gap-y-2 justify-between text-sm"> <div className="flex flex-col gap-y-2 justify-between text-sm">
{generateDisplayString(outputSettings)}{" "} {generateDisplayString(outputSettings)}{" "}
<Popover> {!shouldDisableUpdates && (
<PopoverTrigger asChild> <Popover>
<Button variant="outline">Customize</Button> <PopoverTrigger asChild>
</PopoverTrigger> <Button variant="outline">Customize</Button>
<PopoverContent className="w-80 text-sm"> </PopoverTrigger>
<div className="grid gap-4"> <PopoverContent className="w-80 text-sm">
<div className="space-y-2"> <div className="grid gap-4">
<h4 className="font-medium leading-none">Code Settings</h4> <div className="space-y-2">
<p className="text-muted-foreground"> <h4 className="font-medium leading-none">Code Settings</h4>
Customize your code output <p className="text-muted-foreground">
</p> Customize your code output
</div> </p>
<div className="grid gap-2">
<div className="grid grid-cols-3 items-center gap-4">
<Label htmlFor="output-settings-js">JS</Label>
<Select
value={outputSettings.js}
onValueChange={onJsFrameworkChange}
>
<SelectTrigger
className="col-span-2 h-8"
id="output-settings-js"
>
{displayJSOption(outputSettings.js)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value={JSFrameworkOption.NO_FRAMEWORK}>
No Framework
</SelectItem>
<SelectItem value={JSFrameworkOption.REACT}>
React
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div> </div>
<div className="grid grid-cols-3 items-center gap-4"> <div className="grid gap-2">
<Label htmlFor="output-settings-css">CSS</Label> <div className="grid grid-cols-3 items-center gap-4">
<Select <Label htmlFor="output-settings-js">JS</Label>
value={outputSettings.css} <Select
onValueChange={onCSSValueChange} value={outputSettings.js}
> onValueChange={onJsFrameworkChange}
<SelectTrigger
className="col-span-2 h-8"
id="output-settings-css"
> >
{displayCSSOption(outputSettings.css)} <SelectTrigger
</SelectTrigger> className="col-span-2 h-8"
<SelectContent> id="output-settings-js"
<SelectGroup> >
<SelectItem value={CSSOption.TAILWIND}> {displayJSOption(outputSettings.js)}
Tailwind </SelectTrigger>
</SelectItem> <SelectContent>
<SelectItem value={CSSOption.BOOTSTRAP}> <SelectGroup>
Bootstrap <SelectItem value={JSFrameworkOption.NO_FRAMEWORK}>
</SelectItem> No Framework
</SelectGroup> </SelectItem>
</SelectContent> <SelectItem value={JSFrameworkOption.REACT}>
</Select> React
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-3 items-center gap-4">
<Label htmlFor="output-settings-css">CSS</Label>
<Select
value={outputSettings.css}
onValueChange={onCSSValueChange}
>
<SelectTrigger
className="col-span-2 h-8"
id="output-settings-css"
>
{displayCSSOption(outputSettings.css)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value={CSSOption.TAILWIND}>
Tailwind
</SelectItem>
<SelectItem value={CSSOption.BOOTSTRAP}>
Bootstrap
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
</div> </div>
</div> </div>
</div> </PopoverContent>
</PopoverContent> </Popover>
</Popover> )}
</div> </div>
); );
} }