diff options
Diffstat (limited to 'src/components/atoms/lists/list.tsx')
| -rw-r--r-- | src/components/atoms/lists/list.tsx | 74 |
1 files changed, 0 insertions, 74 deletions
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx deleted file mode 100644 index 8fc9672..0000000 --- a/src/components/atoms/lists/list.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { FC } from 'react'; -import styles from './list.module.scss'; - -export type ListItem = { - /** - * Nested list. - */ - child?: ListItem[]; - /** - * Item id. - */ - id: string; - /** - * Item value. - */ - value: any; -}; - -export type ListProps = { - /** - * Set additional classnames to the list wrapper. - */ - className?: string; - /** - * An array of list items. - */ - items: ListItem[]; - /** - * Set additional classnames to the list items. - */ - itemsClassName?: string; - /** - * The list kind. - */ - kind?: 'ordered' | 'unordered' | 'flex'; -}; - -/** - * List component - * - * Render either an ordered or an unordered list. - */ -export const List: FC<ListProps> = ({ - className = '', - items, - itemsClassName = '', - kind = 'unordered', -}) => { - const ListTag = kind === 'ordered' ? 'ol' : 'ul'; - const kindClass = `list--${kind}`; - const listClass = `${styles.list} ${styles[kindClass]} ${className}`; - - /** - * Retrieve the list items. - * @param array - An array of items. - * @returns {JSX.Element[]} - An array of li elements. - */ - const getItems = (array: ListItem[]): JSX.Element[] => { - return array.map(({ child, id, value }) => ( - <li key={id} className={`${styles.list__item} ${itemsClassName}`}> - {value} - {child && ( - <ListTag - className={`${styles.list} ${styles[kindClass]} ${className}`} - > - {getItems(child)} - </ListTag> - )} - </li> - )); - }; - - return <ListTag className={listClass}>{getItems(items)}</ListTag>; -}; |
