[dyad] Improved nested schema layout - wrote 1 file(s)

src/components/pretty-schema-display.tsx

@@ -52,7 +52,7 @@ const keyIcons: { [key: string]: React.ElementType } = {
   text: Text,
 };
 
-const renderValue = (value: any): React.ReactNode => {
+const renderValue = (value: any, level: number): React.ReactNode => {
   if (typeof value === "string") {
     if (value.startsWith("http://") || value.startsWith("https://")) {
       try {
@@ -81,16 +81,16 @@ const renderValue = (value: any): React.ReactNode => {
   if (typeof value === "object" && value !== null) {
     if (Array.isArray(value)) {
       return (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-1.5">
           {value.map((item, index) => (
-            <div key={index} className="pl-4">
-              {renderValue(item)}
-            </div>
+            <React.Fragment key={index}>
+              {renderValue(item, level + 1)}
+            </React.Fragment>
           ))}
         </div>
       );
     }
-    return <SchemaObjectRenderer data={value} isNested={true} />;
+    return <SchemaObjectRenderer data={value} isNested={true} level={level + 1} />;
   }
 
   return <span>{String(value)}</span>;
@@ -99,12 +99,20 @@ const renderValue = (value: any): React.ReactNode => {
 const SchemaObjectRenderer = ({
   data,
   isNested = false,
+  level = 0,
 }: {
   data: any;
   isNested?: boolean;
+  level?: number;
 }) => {
+  const gridClasses =
+    level > 0 ? "md:grid-cols-[10rem_1fr]" : "md:grid-cols-[12rem_1fr]";
+  const paddingClasses = level > 1 ? "p-1.5" : "p-2";
+
   const content = (
-    <div className="inline-grid grid-cols-1 md:grid-cols-[12rem_1fr] items-start gap-x-4 gap-y-2">
+    <div
+      className={`inline-grid grid-cols-1 ${gridClasses} items-start gap-x-4 gap-y-1.5`}
+    >
       {Object.entries(data).map(([key, value]) => {
         if (key === "@context") return null;
         const label =
@@ -121,7 +129,7 @@ const SchemaObjectRenderer = ({
               {key === "@type" ? (
                 <Badge variant="secondary">{value as string}</Badge>
               ) : (
-                renderValue(value)
+                renderValue(value, level)
               )}
             </div>
           </React.Fragment>
@@ -132,7 +140,9 @@ const SchemaObjectRenderer = ({
 
   if (isNested) {
     return (
-      <div className="p-2 border rounded-lg bg-muted/50">{content}</div>
+      <div className={`${paddingClasses} border rounded-lg bg-muted/50`}>
+        {content}
+      </div>
     );
   }