import { CardsIcon, OneIcon, WarningIcon, BoxIcon } from '@components/icons'
import { Cards, RemoteContent } from 'nextra/components'
import { buildDynamicMDX } from 'nextra/remote'

# Cards Component

A built-in component that allows you to display content in a visually appealing card format. It
includes options for adding an icon, title, link and an image to related content.

export async function getStaticProps() {
  const mdx2 = `<Cards.Card
  icon={<BoxIcon />}
  title="About Nextra"
  href="/about"
  arrow
/>`
  const mdx = `
<Cards>
  <Cards.Card
    icon={<WarningIcon />}
    title="Callout"
    href="/docs/guide/built-ins/callout"
  />
  <Cards.Card
    icon={<CardsIcon />}
    title="Tabs"
    href="/docs/guide/built-ins/tabs"
  />
  <Cards.Card
    icon={<OneIcon />}
    title="Steps"
    href="/docs/guide/built-ins/steps"
  />
</Cards>`
  const props = await buildDynamicMDX(`
## Grouped Cards

### Example

${mdx}

### Usage

Import the \`<Cards>\` component to your page, which includes the \`<Card>\` component.

Then, _optionally_ import the icons that you want to use. To create a set of cards, follow the
example below where the \`<Cards.Card>\` component is used to create a card and the \`<Cards>\`
component is used to group multiple cards together.

~~~mdx filename="MDX"
import { Cards } from 'nextra/components'
import { CardsIcon, OneIcon, WarningIcon } from '../path/with/your/icons'
${mdx}
~~~

## Single Card

A \`<Card>\` not wrapped in a \`<Cards>\` component will not be grouped with other cards. This can
be useful if you want to display a single card in a different format than the other cards on the
page.

### Example

<br/>

${mdx2}

### Usage

~~~mdx filename="MDX"
${mdx2}
~~~`)
  props.__nextra_dynamic_opts.title = 'Cards Component'
  return { props }
}

<RemoteContent components={{ Cards, CardsIcon, OneIcon, WarningIcon, BoxIcon }} />
