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

pages/index.js

@@ -0,0 +1,76 @@
+import styles from '../styles/Home.module.scss';
+
+import Categories from '../components/Categories/Categories';
+import Links from '../components/Links/Links';
+import { createRef, useRef, useState } from 'react';
+
+export default function Home({ categories, favorites }) {
+	const [categoryActive, setCategoryActive] = useState(categories?.[0]?.id);
+	const refCategoryActive = useRef();
+
+	const handleSelectCategory = (id) => {
+		if (!refCategoryActive?.current) return;
+		
+		const { ref } = categories.find(c => c.id === id);
+		ref?.current?.scrollIntoView({
+			block: 'end',
+			behavior: 'smooth'
+		});
+	}
+
+	return (
+		<div className={styles.App}>
+			<Categories
+				categories={categories}
+				favorites={favorites}
+				handleSelectCategory={handleSelectCategory}
+				categoryActive={categoryActive}
+			/>
+			<Links
+				categories={categories}
+				setCategoryActive={setCategoryActive}
+				refCategoryActive={refCategoryActive}
+			/>
+		</div>
+	)
+}
+
+export async function getStaticProps(context) {
+	const categories = [];
+	for (let i = 0; i < 20; i++) {
+		const links = [];
+		for (let y = 0; y < randomIntFromInterval(5, 25); y++) {
+			links.push({
+				id: y,
+				name: 'Lien #' + (y + 1),
+				category: i
+			});
+		}
+
+		categories.push({
+			id: i,
+			name: 'Catégorie #' + (i + 1),
+			links,
+			ref: createRef()
+		});
+	}
+
+	const favorites = [];
+	for (let i = 0; i < 5; i++) {
+		const category = categories[Math.floor(Math.random() * categories.length)];
+		const link = category.links[Math.floor(Math.random() * category.links.length)]
+		favorites.push(link);
+	}
+
+	console.log(favorites);
+	return {
+		props: {
+			categories,
+			favorites
+		}
+	}
+}
+
+function randomIntFromInterval(min, max) {
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}