feat: add divlo.fr

components/Setup/Table.tsx

@@ -0,0 +1,50 @@
+export interface TableRow {
+  title: string
+  value: string
+}
+
+export interface TableProps {
+  rows: TableRow[]
+}
+
+export const Table: React.FC<TableProps> = props => {
+  const { rows } = props
+
+  return (
+    <>
+      <div className='col-24 table-column text-center'>
+        <table>
+          <tbody>
+            {rows.map((row, index) => {
+              return (
+                <tr key={index}>
+                  <th className='table-row'>{row.title}</th>
+                  <td className='table-row'>{row.value}</td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <style jsx>{`
+        .table-column {
+          display: grid;
+        }
+        .table,
+        th,
+        td {
+          border: 1px solid var(--color-text-1);
+          border-collapse: collapse;
+        }
+        .table-row {
+          padding: 15px;
+        }
+        .image-setup {
+          width: 85%;
+        }
+      `}
+      </style>
+    </>
+  )
+}

components/Setup/TableTitle.tsx

@@ -0,0 +1,21 @@
+export const TableTitle: React.FC = props => {
+  const { children } = props
+
+  return (
+    <>
+      <div className='col-24'>
+        <p className='text-center title-table'>
+          <strong className='important'>{children}</strong>
+        </p>
+      </div>
+
+      <style jsx>{`
+        .title-table {
+          font-size: 24px;
+          margin: 40px 0 20px 0;
+        }
+      `}
+      </style>
+    </>
+  )
+}

components/Setup/index.tsx

@@ -0,0 +1,137 @@
+import useTranslation from 'next-translate/useTranslation'
+import Image from 'next/image'
+
+import { Table, TableRow } from './Table'
+import { TableTitle } from './TableTitle'
+
+export const Setup: React.FC = () => {
+  const { t } = useTranslation()
+
+  const rowsConfigPC: TableRow[] = [
+    {
+      title: t('setup:configPC.motherboard'),
+      value: 'MSI Z87-G45 GAMING'
+    },
+    {
+      title: t('setup:configPC.processor'),
+      value: 'Intel Core i5-4690k'
+    },
+    {
+      title: t('setup:configPC.graphicCard'),
+      value: 'Zotac GeForce GTX 970'
+    },
+    {
+      title: t('setup:configPC.ramMemory'),
+      value: '16 GB (2 x 8Go) Kingston HyperX'
+    },
+    {
+      title: t('setup:configPC.hardDrive'),
+      value: '256 GB SSD Crucial & 2 TB Seagate'
+    }
+  ]
+
+  const rowsPeripherals: TableRow[] = [
+    {
+      title: t('setup:peripheral.keyboard'),
+      value: 'Corsair K95 RGB'
+    },
+    {
+      title: t('setup:peripheral.mouse'),
+      value: 'SteelSeries Rival 310'
+    },
+    {
+      title: t('setup:peripheral.headset'),
+      value: 'SteelSeries ARCTIS PRO + GAMEDAC'
+    },
+    {
+      title: t('setup:peripheral.mainScreen'),
+      value: 'IIyama PL2480H'
+    },
+    {
+      title: t('setup:peripheral.secondScreen'),
+      value: 'Samsung SyncMaster 2220LM'
+    }
+  ]
+
+  const rowsOffice: TableRow[] = [
+    {
+      title: t('setup:officeOther.mousepad'),
+      value: 'SteelSeries QCK Heavy (Grand) as string'
+    },
+    {
+      title: 'Mouse Bungee',
+      value: 'BenQ ZOWIE Camade'
+    },
+    {
+      title: t('setup:officeOther.usb'),
+      value: 'Kingston 128GB'
+    },
+    {
+      title: 'Smartphone',
+      value: 'Samsung Galaxy A5 (2017)'
+    }
+  ]
+
+  return (
+    <>
+      <TableTitle>{t('setup:configPC.title')}</TableTitle>
+      <Table rows={rowsConfigPC} />
+
+      <TableTitle>{t('setup:peripheral.title')}</TableTitle>
+      <Table rows={rowsPeripherals} />
+
+      <TableTitle>{t('setup:officeOther.title')}</TableTitle>
+      <Table rows={rowsOffice} />
+
+      <div
+        className='row row-padding justify-content-center'
+        style={{ marginTop: 50 }}
+      >
+        <Image
+          src='/images/setup/setup2019.png'
+          alt='Setup Divlo'
+          width={856.8}
+          height={672.58}
+          className='Setup__image'
+        />
+      </div>
+
+      <div className='row row-padding justify-content-center'>
+        <Image
+          src='/images/setup/setup2019-lights.jpg'
+          alt='Setup Divlo'
+          width={856.8}
+          height={672.58}
+          className='Setup__image'
+        />
+      </div>
+
+      <div className='row row-padding'>
+        <TableTitle>{t('setup:connexion')}</TableTitle>
+        <div style={{ marginBottom: 25 }} className='col-24 text-center'>
+          <a
+            href='https://www.speedtest.net/result/8533865940'
+            target='_blank'
+            rel='noopener noreferrer'
+            aria-label='Speedtest link'
+          >
+            <Image
+              src='/images/setup/speedtest-result.png'
+              alt='Speedtest Result'
+              width={308}
+              height={165}
+            />
+          </a>
+        </div>
+      </div>
+
+      <style jsx global>
+        {`
+          .Setup__image {
+            width: 85% !important;
+          }
+        `}
+      </style>
+    </>
+  )
+}