src/components/organisms/layout/overview.tsx


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

import NextImage, { type ImageProps as NextImageProps } from 'next/image';
import type { FC } from 'react';
import { Figure } from '../../atoms';
import { MetaList, type MetaItemData } from '../../molecules';
import styles from './overview.module.scss';

export type OverviewProps = {
  /**
   * Set additional classnames to the overview wrapper.
   */
  className?: string;
  /**
   * The overview cover.
   */
  cover?: Pick<NextImageProps, 'alt' | 'src' | 'width' | 'height'>;
  /**
   * The overview meta.
   */
  meta: MetaItemData[];
};

/**
 * Overview component
 *
 * Render an overview.
 */
export const Overview: FC<OverviewProps> = ({
  className = '',
  cover,
  meta,
}) => {
  const wrapperClass = `${styles.wrapper} ${className}`;

  return (
    <div className={wrapperClass}>
      {cover ? (
        <Figure>
          <NextImage {...cover} className={styles.cover} />
        </Figure>
      ) : null}
      <MetaList className={styles.meta} hasInlinedValues items={meta} />
    </div>
  );
};