CVPreview.module.scss « CVPreview « Widgets « components « src - www.armandphilippot.com - The frontend of my personal website.

summary refs log tree commit diff stats

path: root/src/components/Widgets/CVPreview/CVPreview.module.scss

blob: 6ddd696442d8b59ae011f895c259eb8ce1f99a77 (plain)

.preview {
  position: relative;
  width: 100%;
  height: 20rem;
  margin-bottom: var(--spacing-sm);
}

ight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

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;