feat(home): finish presentation list

package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "moment": "^2.30.1",
     "next": "14.2.6",
     "next-themes": "^0.3.0",
     "react": "^18",

src/app/components/PresentationCard/index.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+import Typography from "../Typography";
 import styles from "./styles.module.css";
 
 interface PresentationCardProps {
@@ -6,7 +8,13 @@ interface PresentationCardProps {
   date: Date;
 }
 
-export default function PresentationCard({ link }: PresentationCardProps) {
+export default function PresentationCard({
+  title,
+  date,
+  link,
+}: PresentationCardProps) {
+  const { t, i18n } = useTranslation();
+
   return (
     <div className={styles["presentation"]}>
       <iframe
@@ -16,6 +24,26 @@ export default function PresentationCard({ link }: PresentationCardProps) {
         referrerPolicy="strict-origin-when-cross-origin"
         allowFullScreen
       ></iframe>
+      <div className={styles["presentation-info"]}>
+        <div className={styles["presentation-info-header"]}>
+          <Typography variant="h4">
+            {t(`data.presentations.${title}.title.label`)}
+          </Typography>
+          <Typography variant="body1">
+            {t(`data.presentations.${title}.event.label`)}
+          </Typography>
+          <Typography variant="caption2">
+            {new Intl.DateTimeFormat(i18n.language, {
+              day: "2-digit",
+              month: "long",
+              year: "numeric",
+            }).format(date)}
+          </Typography>
+        </div>
+        <Typography variant="body2">
+          {t(`data.presentations.${title}.description.label`)}
+        </Typography>
+      </div>
     </div>
   );
 }

src/app/components/PresentationCard/styles.module.css

@@ -1,6 +1,39 @@
+.presentation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media (min-width: 1024px) {
+    flex-direction: row;
+  }
+}
+
 .presentation iframe {
   border: none;
   width: 100%;
   max-width: 30rem;
   height: 16.875rem;
 }
+
+.presentation-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  width: 100%;
+  max-width: 30rem;
+}
+
+.presentation-info h4 {
+  @media (min-width: 1024px) {
+    text-align: left;
+  }
+}
+
+.presentation-info p {
+  @media (min-width: 1024px) {
+    text-align: left;
+  }
+}

src/app/components/Typography/styles.module.css

@@ -1,5 +1,6 @@
 .typography {
   text-align: center;
+  white-space: pre-wrap;
 }
 
 .headline1 {

src/app/i18n/index.ts

@@ -1,8 +1,7 @@
+"use client";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import moment from "moment";
-import "moment/dist/locale/pt";
 
 import pt from "./locales/pt.json";
 import en from "./locales/en.json";
@@ -46,12 +45,6 @@ i18n
           return value.toLocaleString(lng);
         }
 
-        if (value instanceof Date) {
-          return moment(value)
-            .locale(lng || "")
-            .format(format);
-        }
-
         return value;
       },
     },

src/app/i18n/locales/en.json

@@ -54,7 +54,22 @@
           "label": "Presentations"
         }
       }
-    },
-    "projects": {}
+    }
+  },
+  "data": {
+    "projects": {},
+    "presentations": {
+      "masterChefEcomp": {
+        "title": {
+          "label": "MasterChef ECOMP: A Receita para Fazer um Bom Código"
+        },
+        "event": {
+          "label": "XXX SIECOMP"
+        },
+        "description": {
+          "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet egestas diam. Donec eget convallis ex. Cras nec leo risus. Nunc finibus lorem risus, id fermentum urna tempus eu.\n\nDonec id iaculis dui. Nulla sit amet euismod velit. Donec sed quam sit amet elit eleifend elementum. Morbi pellentesque ligula vel faucibus commodo. Aenean rhoncus varius ligula ut cursus. Duis congue pellentesque rutrum."
+        }
+      }
+    }
   }
-}
+}

src/app/i18n/locales/pt.json

@@ -55,6 +55,19 @@
         }
       }
     },
-    "projects": {}
+    "projects": {},
+    "presentations": {
+      "masterChefEcomp": {
+        "title": {
+          "label": "MasterChef ECOMP: A Receita para Fazer um Bom Código"
+        },
+        "event": {
+          "label": "XXX SIECOMP"
+        },
+        "description": {
+          "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet egestas diam. Donec eget convallis ex. Cras nec leo risus. Nunc finibus lorem risus, id fermentum urna tempus eu.\n\nDonec id iaculis dui. Nulla sit amet euismod velit. Donec sed quam sit amet elit eleifend elementum. Morbi pellentesque ligula vel faucibus commodo. Aenean rhoncus varius ligula ut cursus. Duis congue pellentesque rutrum."
+        }
+      }
+    }
   }
-}
+}

src/app/page.module.css

@@ -226,4 +226,12 @@
 
 .home-presentations-list {
   list-style-type: none;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.home-presentations-list li {
+  width: 100%;
+  max-width: 60rem;
 }