feat: add divlo.fr

components/Interests/InterestsList/InterestItem.tsx

@@ -0,0 +1,41 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { Tooltip } from 'components/design/Tooltip'
+
+interface InterestItemProps {
+  title: string
+  fontAwesomeIcon: IconDefinition
+}
+
+export const InterestItem: React.FC<InterestItemProps> = props => {
+  const { fontAwesomeIcon, title } = props
+
+  return (
+    <>
+      <li className='interest-item'>
+        <Tooltip title={title}>
+          <FontAwesomeIcon
+            className='color-primary'
+            style={{
+              cursor: 'pointer',
+              height: '100%',
+              width: '100%',
+              display: 'block'
+            }}
+            icon={fontAwesomeIcon}
+          />
+        </Tooltip>
+      </li>
+
+      <style jsx>
+        {`
+          .interest-item {
+            margin: 7px 5px;
+            width: 34px;
+            height: 34px;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Interests/InterestsList/index.tsx

@@ -0,0 +1,45 @@
+import { faCode, faMicrochip } from '@fortawesome/free-solid-svg-icons'
+import { faGit } from '@fortawesome/free-brands-svg-icons'
+
+import { InterestItem } from './InterestItem'
+
+export const InterestsList: React.FC = () => {
+  return (
+    <>
+      <div className='container-list'>
+        <ul className='interests-list'>
+          <InterestItem
+            title='Developer Full Stack Junior'
+            fontAwesomeIcon={faCode}
+          />
+          <InterestItem
+            title='Passionate about High-Tech'
+            fontAwesomeIcon={faMicrochip}
+          />
+          <InterestItem
+            title='Open-Source enthusiast'
+            fontAwesomeIcon={faGit}
+          />
+        </ul>
+      </div>
+
+      <style jsx>
+        {`
+          .container-list {
+            display: flex;
+            justify-content: center;
+            margin: 15px 0 15px 0;
+          }
+          .interests-list {
+            display: flex;
+            justify-content: space-around;
+            padding: 0;
+            margin: 0;
+            width: 60%;
+            list-style: none;
+          }
+        `}
+      </style>
+    </>
+  )
+}