From 348fbb09feda3c1d181a57d86298d63314bca391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Terrier?= <noeterrier@proton.me>
Date: Sun, 17 Mar 2024 17:31:52 +0100
Subject: [PATCH] feat: add more news button

---
 app/src/locales.ts                  |  3 +++
 app/src/pages/index.tsx             |  8 +++++++-
 app/src/styles/Button.module.scss   |  5 ++++-
 app/src/styles/Homepage.module.scss | 11 +++++++----
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/src/locales.ts b/app/src/locales.ts
index ab54636..7102754 100644
--- a/app/src/locales.ts
+++ b/app/src/locales.ts
@@ -19,6 +19,7 @@ interface Translations {
   partners: string;
   association: string;
   news: string;
+  moreNews: string;
   error404: string;
   error404desc: string;
 }
@@ -38,6 +39,7 @@ const translations: { [key in Locale]: Translations & OptionsOperators } = {
     partners: "partners",
     association: "association",
     news: "news",
+    moreNews: "more news",
     error404: "error 404",
     error404desc: "this page does not exist!",
     capitalize: (s) => s.replace(/^(\s*\w)/, (s) => s.toUpperCase()),
@@ -53,6 +55,7 @@ const translations: { [key in Locale]: Translations & OptionsOperators } = {
     partners: "partenaires",
     association: "association",
     news: "news",
+    moreNews: "plus de news",
     error404: "erreur 404",
     error404desc: "cette page n'existe pas!",
     capitalize: (s) => s.replace(/^(\s*\w)/, (s) => s.toUpperCase()),
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index ef210a9..2dcac56 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -1,12 +1,13 @@
 import Decoration from "@/assets/decoration.svg";
 import PreviewImage from "@/assets/galleryPreview.png";
 import AssociationDescription from "@/components/AssociationDescription";
+import Button from "@/components/Button";
 import DirectusImage from "@/components/DirectusImage";
 import MembersList from "@/components/MembersList";
 import NewsCard from "@/components/NewsCard";
 import PartnersList from "@/components/PartnersList";
 import { directus, populateLayoutProps } from "@/directus";
-import { getTranslation, queryTranslations } from "@/locales";
+import { getTranslation, queryTranslations, translate } from "@/locales";
 import styles from "@/styles/Homepage.module.scss";
 import {
   Association,
@@ -45,6 +46,11 @@ export default function Home(
             <NewsCard key={(n as any).id} news={n} />
           ))}
         </div>
+        <Button
+          text={translate("moreNews", router.locale)}
+          size="small"
+          onClick={() => router.push("/news")}
+        />
       </div>
 
       <PartnersList partners={props.partners} />
diff --git a/app/src/styles/Button.module.scss b/app/src/styles/Button.module.scss
index 1307b02..cb6b62d 100644
--- a/app/src/styles/Button.module.scss
+++ b/app/src/styles/Button.module.scss
@@ -2,8 +2,11 @@
 
 .button {
   border-radius: 3rem;
-  padding: 0.7rem;
+  padding: 1rem;
   margin: 1rem;
+  cursor: pointer;
+
+  font-size: 1rem;
 
   color: variables.$text-color;
   background-color: variables.$glass-color;
diff --git a/app/src/styles/Homepage.module.scss b/app/src/styles/Homepage.module.scss
index 9fbc411..383ae24 100644
--- a/app/src/styles/Homepage.module.scss
+++ b/app/src/styles/Homepage.module.scss
@@ -52,18 +52,21 @@
 .news {
   @extend .glass;
 
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
-  overflow: scroll;
+  overflow: hidden;
 
   padding: 2em;
 
+  align-items: center;
+
   .newsList {
     margin: 2%;
     gap: 2em;
-    width: fit-content;
     display: grid;
-    grid-template-columns: repeat(3, 50rem);
-    padding-right: 5rem;
+    grid-template-columns: repeat(3, 1fr);
   }
 }