blob: 14c8fe6b6e1c8063f0250dba5dcbaa0d36417260 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import type { FC } from 'react';
import { List, ListItem, SocialLink, type SocialLinkProps } from '../../atoms';
import { Collapsible, type CollapsibleProps } from '../../molecules';
import styles from './social-media.module.scss';
export type Media = Required<
Pick<SocialLinkProps, 'icon' | 'id' | 'label' | 'url'>
>;
export type SocialMediaProps = Omit<CollapsibleProps, 'children'> & {
media: Media[];
};
/**
* Social Media widget component
*
* Render a social media list with links.
*/
export const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
/**
* Retrieve the social media items.
*
* @param {SocialMedia[]} links - An array of social media name and url.
* @returns {JSX.Element[]} The social links.
*/
const getItems = (links: Media[]): JSX.Element[] =>
links.map(({ id, ...link }) => (
<ListItem key={id}>
<SocialLink {...link} />
</ListItem>
));
return (
<Collapsible {...props}>
<List className={styles.list} hideMarker isInline spacing="xs">
{getItems(media)}
</List>
</Collapsible>
);
};
|
