diff --git a/src/components/pretty-schema-display.tsx b/src/components/pretty-schema-display.tsx index 27c825c..59b129d 100644 --- a/src/components/pretty-schema-display.tsx +++ b/src/components/pretty-schema-display.tsx @@ -145,36 +145,42 @@ const SchemaObjectRenderer = ({ {Object.entries(data).map(([key, value]) => { if (key === "@context") return null; - // Custom rendering for FAQPage questions + let labelDiv: React.ReactNode; + let valueDiv: React.ReactNode; + const isDeepEntry = typeof value === "object" && value !== null; + + // Handle FAQPage custom rendering if ( key === "mainEntity" && data["@type"] === "FAQPage" && Array.isArray(value) ) { - return ( - -
- Questions -
-
- {value.map((item, index) => ( - - ))} -
-
+ labelDiv = ( +
+ Questions +
); - } + valueDiv = ( +
+ {value.map((item, index) => ( + + ))} +
+ ); + } else { + // General rendering + const label = + keyMappings[key] || key.charAt(0).toUpperCase() + key.slice(1); + const Icon = keyIcons[key]; - const label = - keyMappings[key] || key.charAt(0).toUpperCase() + key.slice(1); - const Icon = keyIcons[key]; - - return ( - + labelDiv = (
{Icon && } {label}
+ ); + + valueDiv = (
{key === "@type" ? ( {value as string} @@ -182,8 +188,26 @@ const SchemaObjectRenderer = ({ renderValue(value, level) )}
-
- ); + ); + } + + if (isDeepEntry) { + return ( + + {labelDiv} + {/* This empty div acts as a placeholder in the grid's second column, forcing the value to the next row */} +
+
{valueDiv}
+
+ ); + } else { + return ( + + {labelDiv} + {valueDiv} + + ); + } })} );