Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 8x 2x | import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
import cn from 'classnames';
import '../styles/components/card.scss';
type Props = {
/**
* The card header (should include the wanted heading level)
*/
header?: ReactNode;
/**
* Does the card header need a separator? Defaults to true
*/
headerSeparator?: boolean;
/**
* Link components to be displayed at the bottom of the card
*/
links?: ReactNode[];
};
const Card = forwardRef<HTMLElement, Props & HTMLAttributes<HTMLElement>>(
(
{ header, headerSeparator = true, children, links, className, ...props },
ref
) => (
<section className={cn(className, 'card')} ref={ref} {...props}>
<div className="card__container">
{header && (
<div
className={cn('card__header', {
'card__header--with-separator': headerSeparator,
})}
>
{header}
</div>
)}
{children && <div className="card__content">{children}</div>}
</div>
{!!links?.length && <div className="card__actions">{links}</div>}
</section>
)
);
export default Card;
|