From c153f93dc8691a71dc76aad3dd618298da9d238a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 17 Oct 2023 19:46:08 +0200 Subject: refactor(components): rewrite Card component * make the component more generic * merge `` and `` 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. --- src/components/molecules/card/card-footer.tsx | 32 +++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/molecules/card/card-footer.tsx (limited to 'src/components/molecules/card/card-footer.tsx') diff --git a/src/components/molecules/card/card-footer.tsx b/src/components/molecules/card/card-footer.tsx new file mode 100644 index 0000000..56a6513 --- /dev/null +++ b/src/components/molecules/card/card-footer.tsx @@ -0,0 +1,32 @@ +import { + forwardRef, + type ForwardRefRenderFunction, + type ReactNode, +} from 'react'; +import { Footer, type FooterProps } from '../../atoms'; +import { useCardFooterMeta } from './card-provider'; +import styles from './card.module.scss'; + +export type CardFooterProps = Omit & { + /** + * The card footer contents. + */ + children?: ReactNode; +}; + +const CardFooterWithRef: ForwardRefRenderFunction< + HTMLElement, + CardFooterProps +> = ({ children, className = '', ...props }, ref) => { + const footerClass = `${styles.footer} ${className}`; + const meta = useCardFooterMeta(); + + return ( + + ); +}; + +export const CardFooter = forwardRef(CardFooterWithRef); -- cgit v1.2.3