120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
} from "./ui/select";
|
|
import { GeneratedCodeConfig } from "../types";
|
|
import { addEvent } from "../lib/analytics";
|
|
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.SVG:
|
|
return (
|
|
<div>
|
|
<span className="font-semibold">SVG</span>
|
|
</div>
|
|
);
|
|
default: {
|
|
const exhaustiveCheck: never = config;
|
|
throw new Error(`Unhandled case: ${exhaustiveCheck}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
interface Props {
|
|
generatedCodeConfig: GeneratedCodeConfig | undefined;
|
|
setGeneratedCodeConfig: (config: GeneratedCodeConfig) => void;
|
|
label?: string;
|
|
shouldDisableUpdates?: boolean;
|
|
}
|
|
|
|
function OutputSettingsSection({
|
|
generatedCodeConfig,
|
|
setGeneratedCodeConfig,
|
|
label = "Generating:",
|
|
shouldDisableUpdates = false,
|
|
}: Props) {
|
|
return (
|
|
<div className="flex flex-col gap-y-2 justify-between text-sm">
|
|
<div className="grid grid-cols-3 items-center gap-4">
|
|
<span>{label}</span>
|
|
<Select
|
|
value={generatedCodeConfig}
|
|
onValueChange={(value: string) => {
|
|
addEvent("OutputSettings", { stack: value });
|
|
setGeneratedCodeConfig(value as GeneratedCodeConfig);
|
|
}}
|
|
disabled={shouldDisableUpdates}
|
|
>
|
|
<SelectTrigger className="col-span-2" id="output-settings-js">
|
|
{generatedCodeConfig
|
|
? generateDisplayComponent(generatedCodeConfig)
|
|
: "Select a stack"}
|
|
</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.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>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default OutputSettingsSection;
|