diff options
Diffstat (limited to 'src/components/molecules/layout/card.tsx')
| -rw-r--r-- | src/components/molecules/layout/card.tsx | 88 |
1 files changed, 0 insertions, 88 deletions
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx deleted file mode 100644 index d90cba2..0000000 --- a/src/components/molecules/layout/card.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import NextImage, { type ImageProps as NextImageProps } from 'next/image'; -import type { FC } from 'react'; -import { ButtonLink, Figure, Heading, type HeadingLevel } from '../../atoms'; -import { MetaList, type MetaItemData } from '../meta-list'; -import styles from './card.module.scss'; - -export type CardProps = { - /** - * Set additional classnames to the card wrapper. - */ - className?: string; - /** - * The card cover. - */ - cover?: Pick<NextImageProps, 'alt' | 'src' | 'title' | 'width' | 'height'>; - /** - * The card id. - */ - id: string; - /** - * The card meta. - */ - meta?: MetaItemData[]; - /** - * The card tagline. - */ - tagline?: string; - /** - * The card title. - */ - title: string; - /** - * The title level (hn). - */ - titleLevel: HeadingLevel; - /** - * The card target. - */ - url: string; -}; - -/** - * Card component - * - * Render a link with minimal information about its content. - */ -export const Card: FC<CardProps> = ({ - className = '', - cover, - id, - meta, - tagline, - title, - titleLevel, - url, -}) => { - const cardClass = `${styles.wrapper} ${className}`; - const headingId = `${id}-heading`; - - return ( - <ButtonLink aria-labelledby={headingId} className={cardClass} to={url}> - <article className={styles.article}> - <header className={styles.header}> - {cover ? ( - <Figure> - <NextImage {...cover} className={styles.cover} /> - </Figure> - ) : null} - <Heading className={styles.title} id={headingId} level={titleLevel}> - {title} - </Heading> - </header> - {tagline ? <div className={styles.tagline}>{tagline}</div> : null} - {meta ? ( - <footer className={styles.footer}> - <MetaList - className={styles.list} - hasBorderedValues={meta.length < 2} - hasInlinedValues={meta.length < 2} - isCentered - items={meta} - /> - </footer> - ) : null} - </article> - </ButtonLink> - ); -}; |
