feat: add equivalents list

Author: desoindx

public/equivalents.csv

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import Block from 'components/layout/Block'
 import ToolCard, { ToolCardProps } from './ToolCard'
 import styles from './ToolCards.module.css'

public/images/tools-csv.svg

@@ -45,6 +45,14 @@ const Doc = () => {
             linkLabel='Consulter'
             link='/doc/kit-communication'
           />
+          <ToolCard
+            slug='doc-csv'
+            horizontal
+            title='Liste des équivalents'
+            description='L’impact carbone de nos 300+ objets et gestes dans un simple tableau'
+            linkLabel='Télécharger (.CSV 33KB)'
+            link='/equivalents.csv'
+          />
         </ul>
       </Block>
     </>

public/images/tools-doc-csv.svg

@@ -7,4 +7,9 @@
 
 .button {
   width: 100% !important;
+  margin-bottom: 1.25rem;
+}
+
+.links {
+  color: var(--neutral-50);
 }

src/components/cards/News.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
 import { computedEquivalents } from 'src/providers/equivalents'
 import { useSearchEquivalent } from 'src/providers/useSearchEquivalent'
@@ -79,6 +80,10 @@ const Equivalents = () => {
         }}>
         Afficher d'autres objets et gestes
       </Button>
+      <p className={styles.link}>
+        Vous souhaitez parcourir l’ensemble des équivalents ?{' '}
+        <Link href='/equivalents.csv'>Télécharger la liste des équivalents (.csv 33KB)</Link>
+      </p>
     </Block>
   )
 }

src/components/doc/Doc.tsx

@@ -92,6 +92,11 @@ export default function Footer() {
                     Code source
                   </Link>
                 </li>
+                <li>
+                  <Link prefetch={false} href='/equivalents.csv'>
+                    Liste des équivalents
+                  </Link>
+                </li>
                 <li>
                   <Link prefetch={false} href='/doc/api'>
                     API

src/components/home/Equivalents.module.css

@@ -4,3 +4,9 @@
   margin-top: 1rem;
   gap: 0.5rem;
 }
+
+.tools {
+  > li:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+}

src/components/home/Equivalents.tsx

@@ -47,6 +47,38 @@ const Outils = () => {
               </>
             ),
           },
+          {
+            slug: 'csv',
+            title: 'Télécharger la liste des équivalents',
+            description: (
+              <>
+                <div className={styles.descriptionLine}>
+                  <div className={styles.icons}>
+                    <div className={styles.shape}>
+                      <SimpleStarShapeIcon />
+                    </div>
+                    <div className={styles.check}>
+                      <CheckRoundIcon />
+                    </div>
+                  </div>
+                  <p>+ de 300 équivalents avec leurs facteurs d’émission</p>
+                </div>
+                <div className={styles.descriptionLine}>
+                  <div className={styles.icons}>
+                    <div className={styles.shape}>
+                      <SimpleStarShapeIcon />
+                    </div>
+                    <div className={styles.check}>
+                      <CheckRoundIcon />
+                    </div>
+                  </div>
+                  <p>Un simple tableau au format CSV</p>
+                </div>
+              </>
+            ),
+            linkLabel: 'Télécharger (.CSV 33KB)',
+            link: '/equivalents.csv',
+          },
         ]}
       />
       <Block