Card component

[C-EO]

How do I implement the card, Cards component?

[Subham-Maity]

@C-EO

import { Card, Cards } from '@components/card'

https://github.com/shuding/nextra/blob/b43d775231ada9579e9322cb680936077e43e700/docs/pages/docs/index.mdx?plain=1#L11-L26

Result: https://nextra.site/docs#quick-start

[C-EO]

@Subham-Maity Itried that but the Vercel deployment kept returning `....'@components/card' has not been found on 'vercel/path0/pages'

how do i troubleshoot that

[Subham-Maity]

@C-EO Create a custom component for the card and import them simply (note: dependency "clsx": "^1.2.1")

Folder Structure: components/card/

Files index.tsx

import cn from 'clsx'
import Link from 'next/link'

import styles from './style.module.css'

export function Card({
                         children,
                         title,
                         icon,
                         image,
                         arrow,
                         demo,
                         href,
                         ...props
                     }) {
    const animatedArrow = arrow ? (
        <span
            className={cn(
                'transition-transform duration-75',
                'group-hover:translate-x-[2px]'
            )}
        >
      →
    </span>
    ) : null

    if (image) {
        return (
            <Link
                href={href}
                className={cn(
                    styles.card,
                    'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-gray-100 text-current no-underline shadow shadow-gray-100 transition-all duration-200',
                    'hover:border-gray-300 hover:shadow-lg hover:shadow-gray-100'
                )}
                {...props}
            >
                {children}
                <span
                    className={cn(
                        styles.title,
                        'gap-2 p-4 text-gray-700',
                        'hover:text-gray-900'
                    )}
                >
          {icon}
                    <span className="flex gap-1">
            {title}
                        {animatedArrow}
          </span>
        </span>
            </Link>
        )
    }

    return (
        <Link
            href={href}
            className={cn(
                styles.card,
                'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-transparent text-current no-underline shadow-sm shadow-gray-100 transition-all duration-200 dark:border-neutral-800 dark:shadow-none',
                'hover:border-gray-300 hover:bg-slate-50 hover:shadow-md hover:shadow-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-900 dark:hover:shadow-none'
            )}
            {...props}
        >
      <span
          className={cn(
              styles.title,
              'gap-2 p-4 text-gray-700 dark:text-neutral-200',
              'hover:text-gray-900 dark:hover:text-neutral-50'
          )}
      >
        {icon}
          {title}
          {animatedArrow}
      </span>
        </Link>
    )
}

export function Cards({ children, num, ...props }) {
    return (
        <div
            className={cn(styles.cards, 'mt-4 gap-4')}
            {...props}
            style={
                {
                    '--rows': num || 3,
                    ...props.style
                } as any
            }
        >
            {children}
        </div>
    )
}

style.module.css

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(250px, calc((100% - 1rem * 2) / 3)), 1fr)
  );
}

.card:hover svg {
  color: currentColor;
}

.card svg {
  width: 1.5rem;
  color: #00000033;
  transition: color 0.3s ease;
}

.card p {
  margin-top: 0.5rem;
}

.card .title {
  display: flex;
  font-weight: 600;
  align-items: flex-start;
}

:global(.dark) .card {
  background-color: hsl(var(--nextra-primary-hue) 10% 12%/0.9);
}
:global(.dark) .card:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:global(.dark) .card svg {
  color: #ffffff66;
}
:global(.dark) .card:hover svg {
  color: currentColor;
}

For use it in mdx

abc.mdx import { Card, Cards } from '@components/card'

<Cards>
    <Card icon={
        <svg  .......>
        </svg>
    } title="1. Chapter 1" href="/docs/abcsd/mod1">
    </Card>
    
</Cards>

[C-EO]

@Subham-Maity I did that as my first solution before opening this issue it didn't work and gave the error i told u about

[Subham-Maity]

Hey @C-EO! Would you be able to provide your production repository??

[phenomen]

For @components alias to resolve, you need to add it to ./tsconfig.json (as well as baseUrl)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

[C-EO]

"paths": {
      "@components/*": ["components/*"]

@phenomen has provided the needed solution

but the repo link is https://github.com/c-eo/nitehub-docs

[C-EO]

@phenomen your solution works but the card CSS doesn't seem to be working.

i get this

[C-EO]

Hey @C-EO! Would you be able to provide your production repository??

@Subham-Maity the repo link is above

[shuding]

Card is currently not a built-in component. We currently only have Callout and Tabs supported:

https://nextra.site/docs/docs-theme/built-ins

But we plan to add more in the future, including Cards and Steps.

[nourkagha]

@phenomen your solution works but the card CSS doesn't seem to be working.

i get this

I'm getting the same issue. Is there a way or workaround to resolve this, @shuding? Thanks!

[dimaMachina]

@nourkagha read https://github.com/shuding/nextra/issues/1060#issuecomment-1356511579 comment