Début du projet, création du comportement de base + structure du site / du projet

components/Categories/Categories.js

@@ -0,0 +1,31 @@
+import styles from '../../styles/categories.module.scss';
+
+export default function Categories({ categories, favorites, handleSelectCategory, categoryActive }) {
+    return (<div className={styles['categories-wrapper']}>
+        <div className={styles['block-wrapper']}>
+            <h4>Favoris</h4>
+            <ul className={styles['favorites']}>
+                {favorites.map(({ name, category }, key) => {
+                    const catName = categories.find(c => c.id === category).name;
+                    return <li key={key} className={styles['item']}>
+                        {name} <span className={styles['category']}>- {catName}</span>
+                    </li>;
+                })}
+            </ul>
+        </div>
+        <div className={styles['block-wrapper']}>
+            <h4>Catégories</h4>
+            <ul className={styles['categories']}>
+                {categories.map(({ id, name }, key) => (
+                    <li 
+                        key={key} 
+                        className={id === categoryActive ? styles['active'] : null} 
+                        onClick={() => handleSelectCategory(id)}
+                    >
+                        {name} {id === categoryActive ? '(active)' : ''}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    </div>);
+}

components/Links/Link.js

@@ -0,0 +1,28 @@
+import { useEffect, useCallback } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import styles from '../../styles/links.module.scss';
+
+export default function Link({ category,  setCategoryActive, refCategoryActive }) {
+    const { ref, inView } = useInView({ threshold: .5 });
+    const { id, name, links, ref: refCategory } = category;
+
+    useEffect(() => inView ? setCategoryActive(id) : null, [id, inView, setCategoryActive]);
+
+    const setRefs = useCallback((node) => {
+        refCategory.current = node;
+        refCategoryActive.current = node;
+        ref(node);
+    }, [ref, refCategoryActive, refCategory]);
+
+    return (
+        <div className={styles['link-block']} ref={setRefs}>
+            <h2>{name}</h2>
+            <ul className={styles['links']}>
+                {links.map(({ name }, key2) => (
+                    <li key={key2} className={styles['item']}>{name}</li>
+                ))}
+            </ul>
+        </div>
+    );
+}

components/Links/Links.js

@@ -0,0 +1,16 @@
+import Link from './Link';
+
+import styles from '../../styles/links.module.scss';
+
+export default function Links({ categories, setCategoryActive, refCategoryActive }) {
+    return (<div className={styles['links-wrapper']}>
+        {categories.map((category, key) => (
+            <Link 
+                key={key} 
+                category={category} 
+                setCategoryActive={setCategoryActive}
+                refCategoryActive={refCategoryActive} 
+            />
+        ))}
+    </div>);
+}