import { Cards, Image } from 'nextra/components' import { cloneElement } from 'react'

Showcase

Projects powered by Nextra <Cards> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> <></> </Cards>

export default function MdxLayout(props) { return cloneElement(props.children, { components: { img: props => ( <Image {...props} className="[aspect-ratio:12/6.3] object-cover" /> ), a({ children, href }) { const { alt } = children.props return ( <Cards.Card href={href} title={alt.replace(/ preview$/i, '')} target="_blank" rel="noreferrer" arrow className="!no-underline" > {children} </Cards.Card> ) }, p(props) { return ( <p {...props} className="mt-4 mb-16 text-center text-lg text-gray-600 dark:text-gray-400" /> ) } } }) }