diff options
Diffstat (limited to 'src/components/organisms/widgets/social-media-widget/social-media-widget.tsx')
| -rw-r--r-- | src/components/organisms/widgets/social-media-widget/social-media-widget.tsx | 43 |
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); |
