diff options
Diffstat (limited to 'src/components/molecules/layout/columns.tsx')
| -rw-r--r-- | src/components/molecules/layout/columns.tsx | 62 |
1 files changed, 0 insertions, 62 deletions
diff --git a/src/components/molecules/layout/columns.tsx b/src/components/molecules/layout/columns.tsx deleted file mode 100644 index 56cd1a1..0000000 --- a/src/components/molecules/layout/columns.tsx +++ /dev/null @@ -1,62 +0,0 @@ -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>; -}; |
