= 2 && "md:grid-cols-2"}
${columns >= 3 && "xl:grid-cols-3 xl:w-[67rem] xl:max-w-[calc(100vw-25rem)]"}
`}>
{examples.map((example, index) => {
const {title, image, links, description, source, riv} = examplesData[example];
const canvasId = `rive-canvas-${example}`;
return <>
{index === childrenIndex && children}
{image &&
})
}
{riv && !image &&
}
{learnByExample ? "Learn by Example" : title}
{description && !learnByExample &&
{description}
}
{source && source.length > 0 &&
{source.map((item, index) => {
if (source.length == 1) {
return <>Open the Rive file.;
}
if (index == 0) {
return <>Open Rive file 1;
}
return <>, file {index + 1};
})}
}
{
{runtimesInOrder.map(currentRuntime => {
if (runtime && currentRuntime !== runtime) return;
return ;
})}
}
;
})}