aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/widgets/social-media.tsx
blob: 1a261a924f05af8659fed2869ef064e3bbcbf731 (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
41
import { FC } from 'react';
import SocialLink, {
  type SocialLinkProps,
} from '../../atoms/links/social-link';
import Widget, { type WidgetProps } from '../../molecules/layout/widget';
import styles from './social-media.module.scss';

export type Media = SocialLinkProps;

export type SocialMediaProps = Pick<WidgetProps, 'level' | 'title'> & {
  media: Media[];
};

/**
 * Social Media widget component
 *
 * Render a social media list with links.
 */
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[] => {
    return links.map((link, index) => (
      <li key={`media-${index}`}>
        <SocialLink name={link.name} url={link.url} />
      </li>
    ));
  };

  return (
    <Widget expanded={true} {...props}>
      <ul className={styles.list}>{getItems(media)}</ul>
    </Widget>
  );
};

export default SocialMedia;