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-provider.tsx | 43 +++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/components/molecules/card/card-provider.tsx (limited to 'src/components/molecules/card/card-provider.tsx') diff --git a/src/components/molecules/card/card-provider.tsx b/src/components/molecules/card/card-provider.tsx new file mode 100644 index 0000000..5bcdb49 --- /dev/null +++ b/src/components/molecules/card/card-provider.tsx @@ -0,0 +1,43 @@ +import { + createContext, + type FC, + type ReactElement, + type ReactNode, + useContext, +} from 'react'; + +export type CardCoverProviderProps = { + children: ReactNode; + cover?: ReactElement; +}; + +export const CardCoverContext = createContext(null); + +export const useCardCover = () => useContext(CardCoverContext); + +export const CardCoverProvider: FC = ({ + children, + cover, +}) => ( + + {children} + +); + +export type CardFooterMetaProviderProps = { + children: ReactNode; + meta?: ReactElement; +}; + +export const CardFooterMetaContext = createContext(null); + +export const useCardFooterMeta = () => useContext(CardFooterMetaContext); + +export const CardFooterMetaProvider: FC = ({ + children, + meta, +}) => ( + + {children} + +); -- cgit v1.2.3