76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
} from "./ui/select";
|
|
import { Badge } from "./ui/badge";
|
|
import { Stack } from "../lib/stacks/types";
|
|
import { STACK_DESCRIPTIONS } from "../lib/stacks/descriptions";
|
|
|
|
function generateDisplayComponent(stack: Stack) {
|
|
const stackComponents = STACK_DESCRIPTIONS[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 {
|
|
stack: Stack | undefined;
|
|
setStack: (config: Stack) => void;
|
|
label?: string;
|
|
shouldDisableUpdates?: boolean;
|
|
}
|
|
|
|
function OutputSettingsSection({
|
|
stack,
|
|
setStack,
|
|
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={stack}
|
|
onValueChange={(value: string) => setStack(value as Stack)}
|
|
disabled={shouldDisableUpdates}
|
|
>
|
|
<SelectTrigger className="col-span-2" id="output-settings-js">
|
|
{stack ? generateDisplayComponent(stack) : "Select a stack"}
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{Object.values(Stack).map((stack) => (
|
|
<SelectItem value={stack}>
|
|
<div className="flex items-center">
|
|
{generateDisplayComponent(stack)}
|
|
{STACK_DESCRIPTIONS[stack].inBeta && (
|
|
<Badge className="ml-2" variant="secondary">
|
|
Beta
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default OutputSettingsSection;
|