diff --git a/package-lock.json b/package-lock.json index c96b137..da6dd2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,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", @@ -6309,15 +6308,6 @@ "node": ">=16 || 14 >=14.17" } }, - "node_modules/moment": { - "version": "2.30.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", - "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", - "license": "MIT", - "engines": { - "node": "*" - } - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index fd680c4..8275a8e 100644 --- a/package.json +++ b/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", diff --git a/src/app/components/PresentationCard/index.tsx b/src/app/components/PresentationCard/index.tsx index 9460aab..1ad1824 100644 --- a/src/app/components/PresentationCard/index.tsx +++ b/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 (
+
+
+ + {t(`data.presentations.${title}.title.label`)} + + + {t(`data.presentations.${title}.event.label`)} + + + {new Intl.DateTimeFormat(i18n.language, { + day: "2-digit", + month: "long", + year: "numeric", + }).format(date)} + +
+ + {t(`data.presentations.${title}.description.label`)} + +
); } diff --git a/src/app/components/PresentationCard/styles.module.css b/src/app/components/PresentationCard/styles.module.css index e20ae80..5d66d9a 100644 --- a/src/app/components/PresentationCard/styles.module.css +++ b/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; + } +} diff --git a/src/app/components/Typography/styles.module.css b/src/app/components/Typography/styles.module.css index 6169252..b9ee0ae 100644 --- a/src/app/components/Typography/styles.module.css +++ b/src/app/components/Typography/styles.module.css @@ -1,5 +1,6 @@ .typography { text-align: center; + white-space: pre-wrap; } .headline1 { diff --git a/src/app/i18n/index.ts b/src/app/i18n/index.ts index 1344b41..c5aa2bf 100644 --- a/src/app/i18n/index.ts +++ b/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; }, }, diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json index 739e64b..f77c391 100644 --- a/src/app/i18n/locales/en.json +++ b/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." + } + } + } } -} \ No newline at end of file +} diff --git a/src/app/i18n/locales/pt.json b/src/app/i18n/locales/pt.json index a6b6197..5c79e22 100644 --- a/src/app/i18n/locales/pt.json +++ b/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." + } + } + } } -} \ No newline at end of file +} diff --git a/src/app/page.module.css b/src/app/page.module.css index 75b3b32..ba66250 100644 --- a/src/app/page.module.css +++ b/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; }