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.

1 files changed, 43 insertions, 0 deletions

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<ReactElement | null>(null);
+
+export const useCardCover = () => useContext(CardCoverContext);
+
+export const CardCoverProvider: FC<CardCoverProviderProps> = ({
+  children,
+  cover,
+}) => (
+  <CardCoverContext.Provider value={cover ?? null}>
+    {children}
+  </CardCoverContext.Provider>
+);
+
+export type CardFooterMetaProviderProps = {
+  children: ReactNode;
+  meta?: ReactElement;
+};
+
+export const CardFooterMetaContext = createContext<ReactElement | null>(null);
+
+export const useCardFooterMeta = () => useContext(CardFooterMetaContext);
+
+export const CardFooterMetaProvider: FC<CardFooterMetaProviderProps> = ({
+  children,
+  meta,
+}) => (
+  <CardFooterMetaContext.Provider value={meta ?? null}>
+    {children}
+  </CardFooterMetaContext.Provider>
+);