refactor(components): replace SocialMedia with SocialMediaWidget

* the goal is to make the name of the widgets coherent
* remove useless CSS
* replace Media type with SocialMediaData

1 files changed, 43 insertions, 0 deletions

diff --git a/src/components/organisms/widgets/social-media-widget/social-media-widget.tsx b/src/components/organisms/widgets/social-media-widget/social-media-widget.tsx
new file mode 100644
index 0000000..d75f48f
--- /dev/null
+++ b/src/components/organisms/widgets/social-media-widget/social-media-widget.tsx
@@ -0,0 +1,43 @@
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import {
+  List,
+  ListItem,
+  SocialLink,
+  type SocialLinkProps,
+} from '../../../atoms';
+import { Collapsible, type CollapsibleProps } from '../../../molecules';
+
+export type SocialMediaData = Required<
+  Pick<SocialLinkProps, 'icon' | 'id' | 'label' | 'url'>
+>;
+
+export type SocialMediaProps = Omit<CollapsibleProps, 'children'> & {
+  media: SocialMediaData[];
+};
+
+const SocialMediaWidgetWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  SocialMediaProps
+> = ({ media, ...props }, ref) => (
+  <Collapsible {...props} ref={ref}>
+    <List
+      hideMarker
+      isInline
+      // eslint-disable-next-line react/jsx-no-literals
+      spacing="xs"
+    >
+      {media.map(({ id, ...link }) => (
+        <ListItem key={id}>
+          <SocialLink {...link} />
+        </ListItem>
+      ))}
+    </List>
+  </Collapsible>
+);
+
+/**
+ * Social Media widget component
+ *
+ * Render a social media list with links.
+ */
+export const SocialMediaWidget = forwardRef(SocialMediaWidgetWithRef);