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

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

Browse Source
This commit is contained in:
[dyad]
2026-01-20 15:15:50 +01:00
parent 815571e9f9
commit bb61908005
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/pretty-schema-display.tsx
View File

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