feat: NavLinks, adapt quality on home

.gitignore

@@ -5,3 +5,5 @@ node_modules/
 # TODO: Video Content
 *.MOV
 *.mp4
+
+.vercel

components/NavLinks.js

+import Image from "next/image";
+import {
+  Box,
+  Divider,
+  Center,
+  Text,
+  Flex,
+  Spacer,
+  Button,
+} from "@chakra-ui/react";
+import Head from "next/head";
+import Link from "next/link";
+
+function NavLinks({ prev, next }) {
+  let prevText = next == 2 ? "Dernière" : "Précédente";
+  let nextText = next != 1 ? "Suivante" : "Retour au début";
+  return (
+    <Center p="6" justify="space-between">
+      <a href={"/photos/" + prev}>
+        <Button
+          as="a"
+          borderRadius="full"
+          colorScheme="gray"
+          fontSize="xl"
+          size="lg"
+          mx={2}
+          cursor="pointer"
+        >
+          <Text mr={2}>⟸</Text>
+          <Text>{prevText}</Text>
+        </Button>
+      </a>
+      <a href={"/photos/" + next}>
+        <Button
+          as="a"
+          borderRadius="full"
+          colorScheme="gray"
+          fontSize="xl"
+          size="lg"
+          mx={2}
+          cursor="pointer"
+        >
+          <Text>{nextText}</Text>
+          <Text ml={2}>⟹</Text>
+        </Button>
+      </a>
+    </Center>
+  );
+}
+
+export default NavLinks;

pages/index.js

@@ -65,7 +65,7 @@ export default function Home({ data }) {
                   objectFit="cover"
                   placeholder="img/Diaporama/f5b1d804-3860-4073-b280-69e54985c66f.jpg"
                   color="gray.700"
-                  quality={100}
+                  quality={50}
                 />
               </a>
             </WrapItem>

pages/photos/[id].js

@@ -12,6 +12,7 @@ import Image from "next/image";
 import Head from "next/head";
 import Link from "next/link";
 import BackHome from "../../components/BackHome";
+import NavLinks from "../../components/NavLinks";
 import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";
 import { Img } from "@chakra-ui/react";
 
@@ -60,7 +61,7 @@ export default function Photos({ pic }) {
       </Head>
 
       <BackHome />
-      <Divider my="1rem" />
+      <NavLinks prev={pic.prev} next={pic.next} />
 
       <Center>
         <a href={pic.path}>
@@ -75,39 +76,7 @@ export default function Photos({ pic }) {
           />
         </a>
       </Center>
-      <Divider my="1rem" />
-
-      <Center>
-        <Box p="6">
-          <a href={"/photos/" + pic.prev}>
-            <Button
-              as="a"
-              borderRadius="full"
-              colorScheme="gray"
-              fontSize="xl"
-              size="lg"
-              cursor="pointer"
-              m="15px"
-            >
-              ⟸ Précédente
-            </Button>
-          </a>
-          <a href={"/photos/" + pic.next}>
-            <Button
-              as="a"
-              borderRadius="full"
-              colorScheme="gray"
-              fontSize="xl"
-              size="lg"
-              cursor="pointer"
-              m="15px"
-            >
-              <p m="1">{pic.next != 1 ? "Suivante  " : "Retour au début  "}</p>
-              <p>⟹</p>
-            </Button>
-          </a>
-        </Box>
-      </Center>
+      <NavLinks prev={pic.prev} next={pic.next} />
     </Box>
   );
 }