feat: add divlo.fr

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -0,0 +1,50 @@
+import { Tooltip } from 'components/design/Tooltip'
+import Image from 'next/image'
+
+interface SocialMediaItemProps {
+  link: string
+  socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
+}
+
+export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
+  const { link, socialMedia } = props
+
+  return (
+    <>
+      <li className='social-media-list__item'>
+        <a
+          href={link}
+          aria-label={socialMedia}
+          target='_blank'
+          rel='noopener noreferrer'
+          className='social-media-list__link'
+        >
+          <Tooltip title={socialMedia}>
+            <Image
+              width={45}
+              height={45}
+              alt={socialMedia}
+              src={`/images/web/${socialMedia}.png`}
+            />
+          </Tooltip>
+        </a>
+      </li>
+
+      <style jsx>
+        {`
+          .social-media-list__item {
+            display: inline-block;
+            margin: 5px 15px;
+          }
+          .social-media-list__link {
+            width: 45px;
+            height: 45px;
+            position: relative;
+            display: inline-block;
+            background-color: transparent;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Profile/SocialMediaList/index.tsx

@@ -0,0 +1,41 @@
+import { SocialMediaItem } from './SocialMediaItem'
+
+export const SocialMediaList: React.FC = () => {
+  return (
+    <>
+      <div className='row justify-content-center'>
+        <ul className='social-media-list'>
+          <SocialMediaItem
+            socialMedia='Twitter'
+            link='https://twitter.com/Divlo_FR'
+          />
+          <SocialMediaItem
+            socialMedia='GitHub'
+            link='https://github.com/Divlo'
+          />
+          <SocialMediaItem
+            socialMedia='YouTube'
+            link='https://www.youtube.com/c/Divlo'
+          />
+          <SocialMediaItem
+            socialMedia='Twitch'
+            link='https://www.twitch.tv/divlo'
+          />
+          <SocialMediaItem socialMedia='Email' link='mailto:contact@divlo.fr' />
+        </ul>
+      </div>
+
+      <style jsx>{`
+        .social-media-list {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          text-align: center;
+          padding: 15px 0;
+          margin-top: 10px;
+        }
+      `}
+      </style>
+    </>
+  )
+}