feat: NavLinks, adapt quality on home

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/photos/[id].js

@@ -13,6 +13,7 @@ import Image from "next/image";
 import Head from "next/head";
 import BackHome from "../../components/BackHome";
 // import { getPlaiceholder } from "plaiceholder";
+import NavLinks from "../../components/NavLinks";
 
 export async function getStaticPaths() {
   const photos = await getAllPhotos();
@@ -69,10 +70,10 @@ export default function Photos({ photo, placeholder }) {
       </Head>
 
       <BackHome />
-      <Divider my="1rem" />
+      <NavLinks prev={pic.prev} next={pic.next} />
 
       <Center>
-        <a href={photo.path}>
+        <Link href={photo.path}>
           <Image
             src={photo.path}
             width={photo.dimensions.width || 480}
@@ -84,43 +85,11 @@ export default function Photos({ photo, placeholder }) {
             blurDataURL={placeholder}
             loading="eager"
           />
-        </a>
-      </Center>
-      <Divider my="1rem" />
-
-      <Center>
-        <Box p="6">
-          <Link href={"/photos/" + photo.prev}>
-            <Button
-              as="a"
-              borderRadius="full"
-              colorScheme="gray"
-              fontSize={["sm", "md", "lg", "lg"]}
-              size={["sm", "md", "lg", "lg"]}
-              cursor="pointer"
-              m="15px"
-            >
-              ⟸ Précédente
-            </Button>
         </Link>
-          <Link href={"/photos/" + photo.prev}>
-            <Button
-              as="a"
-              borderRadius="full"
-              colorScheme="gray"
-              fontSize={["sm", "md", "lg", "lg"]}
-              size={["sm", "md", "lg", "lg"]}
-              cursor="pointer"
-              m="15px"
-            >
-              <p m="1">
-                {photo.next != 1 ? "Suivante  " : "Retour au début  "}
-              </p>
-              <p>⟹</p>
-            </Button>
-          </Link>
-        </Box>
       </Center>
+
+      <Divider my="1rem" />
+      <NavLinks prev={pic.prev} next={pic.next} />
     </Box>
   );
 }