feat: use Docker in production (#12) - www.armandphilippot.com - The frontend of my personal website.

about summary refs log tree commit diff stats

path: root/public/prism/prism-dns-zone-file.min.js

diff options

author	Armand Philippot <git@armandphilippot.com>	2022-02-25 17:25:10 +0100
committer	GitHub <noreply@github.com>	2022-02-25 17:25:10 +0100
commit	774d5b4c538d93889bf743b6cd7d01a85f8715e6 (patch)
tree	ece773efb8f625a05b0d8304ce610cf2e51368f0 /public/prism/prism-dns-zone-file.min.js
parent	2f1de56509948e4aecac058adeb07c3502bdf818 (diff)

feat: use Docker in production (#12)

* build: add experimental feature outputStandalone With this option, Next.js can create a standalone folder with the necessary files for a production deployment. It will be useful for Docker deployment. * chore: add Docker configuration * docs: update README with Docker instructions

Diffstat (limited to 'public/prism/prism-dns-zone-file.min.js')

0 files changed, 0 insertions, 0 deletions

n100'>100 101 102 103

import { FC } from 'react';
import DescriptionListItem, {
  type DescriptionListItemProps,
} from './description-list-item';
import styles from './description-list.module.scss';

export type DescriptionListItem = {
  /**
   * The item id.
   */
  id: string;
  /**
   * The list item layout.
   */
  layout?: DescriptionListItemProps['layout'];
  /**
   * A list label.
   */
  label: DescriptionListItemProps['label'];
  /**
   * An array of values for the list item.
   */
  value: DescriptionListItemProps['value'];
};

export type DescriptionListProps = {
  /**
   * Set additional classnames to the list wrapper.
   */
  className?: string;
  /**
   * Set additional classnames to the `dt`/`dd` couple wrapper.
   */
  groupClassName?: string;
  /**
   * The list items.
   */
  items: DescriptionListItem[];
  /**
   * Set additional classnames to the `dt` element.
   */
  labelClassName?: string;
  /**
   * The list layout. Default: column.
   */
  layout?: 'inline' | 'column';
  /**
   * Set additional classnames to the `dd` element.
   */
  valueClassName?: string;
  /**
   * If true, use a slash to delimitate multiple values.
   */
  withSeparator?: DescriptionListItemProps['withSeparator'];
};

/**
 * DescriptionList component
 *
 * Render a description list.
 */
const DescriptionList: FC<DescriptionListProps> = ({
  className = '',
  groupClassName = '',
  items,
  labelClassName = '',
  layout = 'column',
  valueClassName = '',
  withSeparator,
}) => {
  const layoutModifier = `list--${layout}`;

  /**
   * Retrieve the description list items.
   *
   * @param {DescriptionListItem[]} listItems - An array of items.
   * @returns {JSX.Element[]} The description list items.
   */
  const getItems = (listItems: DescriptionListItem[]): JSX.Element[] => {
    return listItems.map(({ id, layout: itemLayout, label, value }) => {
      return (
        <DescriptionListItem
          key={id}
          label={label}
          value={value}
          layout={itemLayout}
          className={groupClassName}
          descriptionClassName={valueClassName}
          termClassName={labelClassName}
          withSeparator={withSeparator}
        />
      );
    });
  };

  return (
    <dl className={`${styles.list} ${styles[layoutModifier]} ${className}`}>
      {getItems(items)}
    </dl>
  );
};

export default DescriptionList;