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

15
frontend/src/types.ts
View File

@ -3,16 +3,27 @@ export enum EditorTheme {
COBALT = "cobalt",
}
// Keep in sync with backend (prompts.py)
// Keep in sync with backend (prompts/types.py)
export enum GeneratedCodeConfig {
HTML_TAILWIND = "html_tailwind",
REACT_TAILWIND = "react_tailwind",
VUE_TAILWIND = "vue_tailwind",
BOOTSTRAP = "bootstrap",
VUE_TAILWIND = "vue_tailwind",
IONIC_TAILWIND = "ionic_tailwind",
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 {
openAiApiKey: string | null;
openAiBaseURL: string | null;