Fix JSONGenerator: streamline SelectItem markup and enhance JSON display layout for improved readability and user experience

This commit is contained in:
Bram Suurd 2024-11-13 23:19:35 +01:00
parent a48eaafbb6
commit 49dedd8430

View File

@ -547,10 +547,7 @@ export default function JSONGenerator() {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{Object.keys(AlertColors).map((type) => ( {Object.keys(AlertColors).map((type) => (
<SelectItem <SelectItem key={type} value={type}>
key={type}
value={type}
>
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{type.charAt(0).toUpperCase() + type.slice(1)}{" "} {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
<div <div
@ -590,7 +587,7 @@ export default function JSONGenerator() {
: "The current JSON does not match the required schema."} : "The current JSON does not match the required schema."}
</AlertDescription> </AlertDescription>
</Alert> </Alert>
<pre className="mt-4 p-4 relative bg-secondary rounded shadow"> <div className="relative">
<Button <Button
className="absolute right-2 top-2" className="absolute right-2 top-2"
size="icon" size="icon"
@ -608,8 +605,10 @@ export default function JSONGenerator() {
<Clipboard className="h-4 w-4" /> <Clipboard className="h-4 w-4" />
)} )}
</Button> </Button>
{JSON.stringify(script, null, 2)} <pre className="mt-4 p-4 bg-secondary rounded shadow overflow-x-scroll">
</pre> {JSON.stringify(script, null, 2)}
</pre>
</div>
</div> </div>
</div> </div>
); );