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

5
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 />}

11
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,6 +127,7 @@ 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)}{" "}
{!shouldDisableUpdates && (
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant="outline">Customize</Button> <Button variant="outline">Customize</Button>
@ -187,6 +193,7 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
)}
</div> </div>
); );
} }