diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-17 19:46:08 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 |
| commit | c153f93dc8691a71dc76aad3dd618298da9d238a (patch) | |
| tree | 9c116c1472bab5585f98bceee19cfeca5041360d /src/components/molecules/card/card-body.tsx | |
| parent | 006b15b467a5cd835a6eab1b49023100bdc8f2e6 (diff) | |
refactor(components): rewrite Card component
* make the component more generic
* merge `<Summary />` and `<Comment />` styles into card component
to avoid repeating the same structure
* remove most of the props to use composition
However the CSS is a bit complex because of the two variants...
Also, the component should be refactored when the CSS pseudo-class
`:has` has enough support: the provider and the `cover` and `meta`
props should be removed.
Diffstat (limited to 'src/components/molecules/card/card-body.tsx')
| -rw-r--r-- | src/components/molecules/card/card-body.tsx | 18 |
1 files changed, 18 insertions, 0 deletions
diff --git a/src/components/molecules/card/card-body.tsx b/src/components/molecules/card/card-body.tsx new file mode 100644 index 0000000..40cf515 --- /dev/null +++ b/src/components/molecules/card/card-body.tsx @@ -0,0 +1,18 @@ +import type { FC, HTMLAttributes } from 'react'; +import styles from './card.module.scss'; + +export type CardBodyProps = HTMLAttributes<HTMLElement>; + +export const CardBody: FC<CardBodyProps> = ({ + children, + className = '', + ...props +}) => { + const bodyClass = `${styles.body} ${className}`; + + return ( + <div {...props} className={bodyClass}> + {children} + </div> + ); +}; |
