refactor(components): rewrite Card component

* make the component more generic
* merge `<Summary />` and `<Comment />` styles into card component
to avoid repeating the same structure
* remove most of the props to use composition

However the CSS is a bit complex because of the two variants...

Also, the component should be refactored when the CSS pseudo-class
`:has` has enough support: the provider and the `cover` and `meta`
props should be removed.

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>
-  );
-};