pascallinxweiler/Metify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Grouped schemas into collapsible sections - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 15:03:08 +01:00
parent 596c2643d4
commit 80a88e20f2
1 changed files with 69 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/schema-display.tsx
View File

@@ -8,36 +8,28 @@ import {
} from "@/components/ui/accordion";
import { CopyButton } from "./copy-button";
import { PrettySchemaDisplay } from "./pretty-schema-display";
import { Badge } from "@/components/ui/badge";
interface SchemaDisplayProps {
schemas: any[];
}
export function SchemaDisplay({ schemas }: SchemaDisplayProps) {
return (
<div className="space-y-4">
<div className="flex justify-between items-center p-4 bg-muted/50 rounded-lg">
<p className="text-sm font-medium">
Found {schemas.length} schema block{schemas.length > 1 ? "s" : ""} on
this page.
</p>
<p className="text-sm text-muted-foreground">Expand to see details.</p>
</div>
<Accordion type="single" collapsible className="w-full space-y-4">
{schemas.map((schema, index) => {
const schemaType = schema["@type"] || `Schema Block ${index + 1}`;
const schemaJson = JSON.stringify(schema, null, 2);
const groupedSchemas = schemas.reduce((acc, schema) => {
const type = Array.isArray(schema["@type"])
? schema["@type"].join(", ")
: schema["@type"] || "Untyped";
if (!acc[type]) {
acc[type] = [];
}
acc[type].push(schema);
return acc;
}, {} as Record<string, any[]>);
const SchemaContent = ({ schema }: { schema: any }) => {
const schemaJson = JSON.stringify(schema, null, 2);
return (
<AccordionItem
value={`item-${index}`}
key={index}
className="border rounded-lg bg-background shadow-sm"
>
<AccordionTrigger className="px-6 hover:no-underline text-left">
<span className="font-semibold">{schemaType}</span>
</AccordionTrigger>
<AccordionContent className="px-6 pt-0">
<>
<div className="border-t pt-4 mb-4">
<div className="flex justify-end items-center gap-2">
<span className="text-sm text-muted-foreground">
@@ -47,10 +39,64 @@ export function SchemaDisplay({ schemas }: SchemaDisplayProps) {
</div>
</div>
<PrettySchemaDisplay schema={schema} />
</>
);
};
return (
<div className="space-y-4">
<div className="flex justify-between items-center p-4 bg-muted/50 rounded-lg">
<p className="text-sm font-medium">
Found {schemas.length} schema block{schemas.length > 1 ? "s" : ""} in{" "}
{Object.keys(groupedSchemas).length} type
{Object.keys(groupedSchemas).length > 1 ? "s" : ""}.
</p>
<p className="text-sm text-muted-foreground">Expand to see details.</p>
</div>
<Accordion type="multiple" className="w-full space-y-4">
{Object.entries(groupedSchemas).map(
([type, schemaGroup], groupIndex) => (
<AccordionItem
value={`group-${type}-${groupIndex}`}
key={groupIndex}
className="border rounded-lg bg-background shadow-sm"
>
<AccordionTrigger className="px-6 hover:no-underline text-left">
<div className="flex items-center gap-3">
<span className="font-semibold">{type}</span>
<Badge variant="secondary">{schemaGroup.length}</Badge>
</div>
</AccordionTrigger>
<AccordionContent className="px-6 pb-6 pt-0">
{schemaGroup.length > 1 ? (
<div className="border-t pt-4">
<Accordion
type="multiple"
className="w-full space-y-2"
>
{schemaGroup.map((schema, schemaIndex) => (
<AccordionItem
value={`schema-${groupIndex}-${schemaIndex}`}
key={schemaIndex}
className="border rounded-lg bg-muted/50"
>
<AccordionTrigger className="px-4 py-3 hover:no-underline text-sm font-medium">
{type} #{schemaIndex + 1}
</AccordionTrigger>
<AccordionContent className="p-4 bg-background rounded-b-lg">
<SchemaContent schema={schema} />
</AccordionContent>
</AccordionItem>
);
})}
))}
</Accordion>
</div>
) : (
<SchemaContent schema={schemaGroup[0]} />
)}
</AccordionContent>
</AccordionItem>
)
)}
</Accordion>
</div>
);