add lorem picsum to galeries

next.config.mjs

@@ -11,8 +11,16 @@ const config = {
   /* If trying out the experimental appDir, comment the i18n config out
    * @see https://github.com/vercel/next.js/issues/41980 */
   i18n: {
-    locales: ["en"],
+    locales: ["fr"],
-    defaultLocale: "en",
+    defaultLocale: "fr",
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "picsum.photos",
+      }
+    ],
   },
 };
 export default config;

src/pages/contact.tsx

@@ -8,7 +8,7 @@ export default function Contact() {
           <h1 className="text-4xl font-bold">Contact</h1>
           <div className="flex flex-col gap-6">
             <p className="text-xl">
-              Vous pouvez nous contacter par mail à l&apos;adresse suivante : {" "} 
+              Vous pouvez nous contacter par mail à l&apos;adresse suivante : {" "}
               <a href="mailto:contact@pchl.fr" className="text-stone-900">contact@pchl.fr</a>
             </p>
             <p className="text-xl">

src/pages/galeries.tsx

@@ -1,6 +1,7 @@
 import { Layout } from "./index";
+import Image from "next/image";
 
-export default function Galeries() {
+export default function Galeries({ pictures }: { pictures: string[] }) {
     return (
         <Layout title="Galeries">
             <div className="container mx-auto p-8">
@@ -8,11 +9,26 @@ export default function Galeries() {
                     <h1 className="text-4xl font-bold">Galeries</h1>
                     <div className="flex flex-col gap-6">
                         <p className="text-xl">
-                             Voici les photos des galeries du club.
+                            Voici les photos des galeries du club.
                         </p>
                     </div>
+                    <div>
+                        {pictures?.map((picture) => (
+                            <div key={picture}>
+                              <Image src={picture} alt="" width={500} height={500} key={picture} />
+                          </div>
+                        ))}
+                        </div>
                 </div>
             </div>
         </Layout>
     );
 }
+
+export function getServerSideProps() {
+    return {
+        props: {
+            pictures: ["https://picsum.photos/seed/1/500","https://picsum.photos/seed/2/500","https://picsum.photos/seed/3/500"],
+        },
+    };
+}

src/styles/globals.css

@@ -13,4 +13,4 @@
 
 h1 {
   font-family: 'Poppins', sans-serif;
-}
+}