aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/layout/sidebar.tsx
blob: d13cc0de4dd31b1afb0fbbb2bde238e26c418e4e (plain)
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
import { FC, ReactNode } from 'react';
import styles from './sidebar.module.scss';

export type SidebarProps = {
  /**
   * The sidebar body.
   */
  children: ReactNode;
  /**
   * Set additional classnames to the aside element.
   */
  className?: string;
};

/**
 * Sidebar component
 *
 * Render an aside element.
 */
const Sidebar: FC<SidebarProps> = ({ children, className = '' }) => {
  return (
    <aside className={`${styles.wrapper} ${className}`}>
      <div className={styles.body}>{children}</div>
    </aside>
  );
};

export default Sidebar;
tance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
import type {
  FC,
  HTMLAttributes,
  ReactComponentElement,
  ReactNode,
} from 'react';
import styles from './columns.module.scss';

export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
};

/**
 * Column component.
 *
 * Render the body as a column.
 */
export const Column: FC<ColumnProps> = ({ children, ...props }) => (
  <div {...props}>{children}</div>
);

// eslint-disable-next-line @typescript-eslint/no-magic-numbers
type ColumnsNumber = 2 | 3 | 4;

export type ColumnsProps = {
  /**
   * The columns.
   */
  children: ReactComponentElement<typeof Column>[];
  /**
   * Set additional classnames to the columns wrapper.
   */
  className?: string;
  /**
   * The number of columns.
   */
  count: ColumnsNumber;
  /**
   * Should the columns be stacked on small devices? Default: true.
   */
  responsive?: boolean;
};

/**
 * Columns component.
 *
 * Render some Column components as columns.
 */
export const Columns: FC<ColumnsProps> = ({
  children,
  className = '',
  count,
  responsive = true,
}) => {
  const countClass = `wrapper--${count}-columns`;
  const responsiveClass = responsive
    ? `wrapper--responsive`
    : 'wrapper--no-responsive';
  const wrapperClass = `${styles.wrapper} ${styles[countClass]} ${styles[responsiveClass]} ${className}`;

  return <div className={wrapperClass}>{children}</div>;
};