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

simplify Stack dropdown generation significantly

Browse Source
This commit is contained in:
Abi Raja 2024-01-09 06:35:17 -08:00
parent b8bce72d23
commit a8b562e392
2 changed files with 40 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import React from "react";
import { import {
Select, Select,
SelectContent, SelectContent,
@ -5,56 +6,22 @@ import {
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
} from "./ui/select"; } from "./ui/select";
import { GeneratedCodeConfig } from "../types"; import { GeneratedCodeConfig, STACK_DESCRIPTION } from "../types";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
function generateDisplayComponent(config: GeneratedCodeConfig) { function generateDisplayComponent(stack: GeneratedCodeConfig) {
switch (config) { const stackComponents = STACK_DESCRIPTION[stack].components;
case GeneratedCodeConfig.HTML_TAILWIND:
return ( return (
<div> <div>
<span className="font-semibold">HTML</span> +{" "} {stackComponents.map((component, index) => (
<span className="font-semibold">Tailwind</span> <React.Fragment key={index}>
</div> <span className="font-semibold">{component}</span>
); {index < stackComponents.length - 1 && " + "}
case GeneratedCodeConfig.REACT_TAILWIND: </React.Fragment>
return ( ))}
<div> </div>
<span className="font-semibold">React</span> +{" "} );
<span className="font-semibold">Tailwind</span>
</div>
);
case GeneratedCodeConfig.BOOTSTRAP:
return (
<div>
<span className="font-semibold">Bootstrap</span>
</div>
);
case GeneratedCodeConfig.IONIC_TAILWIND:
return (
<div>
<span className="font-semibold">Ionic</span> +{" "}
<span className="font-semibold">Tailwind</span>
</div>
);
case GeneratedCodeConfig.VUE_TAILWIND:
return (
<div>
<span className="font-semibold">Vue</span> +{" "}
<span className="font-semibold">Tailwind</span>
</div>
);
case GeneratedCodeConfig.SVG:
return (
<div>
<span className="font-semibold">SVG</span>
</div>
);
default: {
const exhaustiveCheck: never = config;
throw new Error(`Unhandled case: ${exhaustiveCheck}`);
}
}
} }
interface Props { interface Props {
@ -88,39 +55,18 @@ function OutputSettingsSection({
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
<SelectItem value={GeneratedCodeConfig.HTML_TAILWIND}> {Object.values(GeneratedCodeConfig).map((stack) => (
{generateDisplayComponent(GeneratedCodeConfig.HTML_TAILWIND)} <SelectItem value={stack}>
</SelectItem> <div className="flex items-center">
<SelectItem value={GeneratedCodeConfig.REACT_TAILWIND}> {generateDisplayComponent(stack)}
{generateDisplayComponent(GeneratedCodeConfig.REACT_TAILWIND)} {STACK_DESCRIPTION[stack].inBeta && (
</SelectItem> <Badge className="ml-2" variant="secondary">
<SelectItem value={GeneratedCodeConfig.BOOTSTRAP}> Beta
{generateDisplayComponent(GeneratedCodeConfig.BOOTSTRAP)} </Badge>
</SelectItem> )}
<SelectItem value={GeneratedCodeConfig.VUE_TAILWIND}> </div>
<div className="flex items-center"> </SelectItem>
{generateDisplayComponent(GeneratedCodeConfig.VUE_TAILWIND)} ))}
<Badge className="ml-2" variant="secondary">
Beta
</Badge>
</div>
</SelectItem>
<SelectItem value={GeneratedCodeConfig.IONIC_TAILWIND}>
<div className="flex items-center">
{generateDisplayComponent(GeneratedCodeConfig.IONIC_TAILWIND)}
<Badge className="ml-2" variant="secondary">
Beta
</Badge>
</div>
</SelectItem>
<SelectItem value={GeneratedCodeConfig.SVG}>
<div className="flex items-center">
{generateDisplayComponent(GeneratedCodeConfig.SVG)}
<Badge className="ml-2" variant="secondary">
Beta
</Badge>
</div>
</SelectItem>
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>

15
frontend/src/types.ts
View File

@ -3,16 +3,27 @@ export enum EditorTheme {
COBALT = "cobalt", COBALT = "cobalt",
} }
// Keep in sync with backend (prompts.py) // Keep in sync with backend (prompts/types.py)
export enum GeneratedCodeConfig { export enum GeneratedCodeConfig {
HTML_TAILWIND = "html_tailwind", HTML_TAILWIND = "html_tailwind",
REACT_TAILWIND = "react_tailwind", REACT_TAILWIND = "react_tailwind",
VUE_TAILWIND = "vue_tailwind",
BOOTSTRAP = "bootstrap", BOOTSTRAP = "bootstrap",
VUE_TAILWIND = "vue_tailwind",
IONIC_TAILWIND = "ionic_tailwind", IONIC_TAILWIND = "ionic_tailwind",
SVG = "svg", SVG = "svg",
} }
export const STACK_DESCRIPTION: {
[key in GeneratedCodeConfig]: { components: string[]; inBeta: boolean };
} = {
html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
bootstrap: { components: ["Bootstrap"], inBeta: false },
vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },
svg: { components: ["SVG"], inBeta: true },
};
export interface Settings { export interface Settings {
openAiApiKey: string | null; openAiApiKey: string | null;
openAiBaseURL: string | null; openAiBaseURL: string | null;