From 66f318b640970d0fe3eff7124d66f73f0ddc5e9d Mon Sep 17 00:00:00 2001 From: Diogo Matos Date: Thu, 28 Sep 2023 00:22:56 +0100 Subject: [PATCH 1/7] improve and document code --- app/layout.tsx | 2 +- app/page.tsx | 4 +- app/team/page.tsx | 2 +- components/Banners.tsx | 115 ----------------- components/{ => CeSIUMLogo}/CeSIUMLogo.tsx | 6 +- components/CeSIUMLogo/index.ts | 1 + components/{ => Footer}/Footer.tsx | 25 +++- components/Footer/index.ts | 1 + components/{ => Hero}/Hero.tsx | 12 +- components/Hero/index.ts | 1 + components/{ => Navbar}/Navbar.tsx | 10 +- components/Navbar/index.ts | 1 + components/NewsAndEvents.tsx | 58 --------- .../HighlightEvent.tsx} | 11 +- components/NewsAndEvents/NewsAndEvents.tsx | 71 +++++++++++ components/NewsAndEvents/PostWall.tsx | 97 ++++++++++++++ components/NewsAndEvents/index.ts | 1 + components/NewsComponent.tsx | 68 ---------- components/PromoGrid/PromoGrid.tsx | 118 ++++++++++++++++++ components/PromoGrid/index.ts | 1 + data/{NewsData.json => EventData.json} | 0 data/LinkGroup.json | 37 ------ data/PromoGridItems.json | 39 ++++++ data/{2023.json => TeamPageData.json} | 0 24 files changed, 382 insertions(+), 299 deletions(-) delete mode 100644 components/Banners.tsx rename components/{ => CeSIUMLogo}/CeSIUMLogo.tsx (93%) create mode 100644 components/CeSIUMLogo/index.ts rename components/{ => Footer}/Footer.tsx (91%) create mode 100644 components/Footer/index.ts rename components/{ => Hero}/Hero.tsx (73%) create mode 100644 components/Hero/index.ts rename components/{ => Navbar}/Navbar.tsx (88%) create mode 100644 components/Navbar/index.ts delete mode 100644 components/NewsAndEvents.tsx rename components/{SeiComponent.tsx => NewsAndEvents/HighlightEvent.tsx} (96%) create mode 100644 components/NewsAndEvents/NewsAndEvents.tsx create mode 100644 components/NewsAndEvents/PostWall.tsx create mode 100644 components/NewsAndEvents/index.ts delete mode 100644 components/NewsComponent.tsx create mode 100644 components/PromoGrid/PromoGrid.tsx create mode 100644 components/PromoGrid/index.ts rename data/{NewsData.json => EventData.json} (100%) delete mode 100644 data/LinkGroup.json create mode 100644 data/PromoGridItems.json rename data/{2023.json => TeamPageData.json} (100%) diff --git a/app/layout.tsx b/app/layout.tsx index 14b7ff2..49e75e4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,6 @@ import "/styles/globals.css"; import { Inter, Orbitron } from "@next/font/google"; -import Navbar from "@/components/Navbar"; +import Navbar from "@/components/Navbar/Navbar"; import Footer from "@/components/Footer"; const inter = Inter({ subsets: ["latin"], variable: "--inter-font" }); diff --git a/app/page.tsx b/app/page.tsx index 2a1fd9d..03acc72 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,6 @@ "use client"; import Hero from "@/components/Hero"; -import Banners from "@/components/Banners"; +import PromoGrid from "@/components/PromoGrid"; import CalendariumBenefits from "@/components/CalendariumBenefits"; import NewsAndEvents from "@/components/NewsAndEvents"; @@ -8,7 +8,7 @@ export default function Home() { return (
- + {/* */}
diff --git a/app/team/page.tsx b/app/team/page.tsx index 83ab09f..34f1684 100644 --- a/app/team/page.tsx +++ b/app/team/page.tsx @@ -1,5 +1,5 @@ "use client"; -import teamData from "@/data/2023.json"; +import teamData from "@/data/TeamPageData.json"; import React, { useState } from "react"; import DatePicker from "@/components/DatePicker"; import Teams from "@/components/Team"; diff --git a/components/Banners.tsx b/components/Banners.tsx deleted file mode 100644 index 6572845..0000000 --- a/components/Banners.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import Link from "next/link"; -import Image from "next/image"; -import React from "react"; -import linkGroup from "@/data/LinkGroup.json"; - -import CeSIUMLogo from "./CeSIUMLogo"; - -type LinkGroupItem = { - title: string; - subtitle?: string; - description?: string; - href: string; - image?: string; -}; - -type LinkGroup = LinkGroupItem[]; - -interface RowProps { - links: LinkGroup; - rowIndex: number; -} - -function handleColSpan(rowIndex: number, colIndex: number): string { - if (rowIndex === 0) { - return colIndex === 2 ? "col-span-2" : "col-span-1"; - } else if (rowIndex === 1) { - return colIndex === 0 ? "col-span-2" : "col-span-1"; - } else { - return "col-span-1"; - } -} - -function Row({ links, rowIndex }: RowProps) { - return ( - - {links.map((item: LinkGroupItem, colIndex: number) => ( -
- {item.image && ( - - - - )} - -

{item.title}

-

{item.subtitle}

- -
- {item.description} -
- {!item.image && ( - - Ver mais{" "} - - - )} -
- ))} - - ); -} - -export default function Banners() { - const rows: JSX.Element[] = linkGroup.map( - (row: LinkGroup, rowIndex: number) => ( - - ), - ); - - return ( -
- {rows} -
-

Torna-te Sócio

-
    - {[ - "Kit de Sócio", - "Cartão de Sócio", - "Descontos em Parceiros", - "Acesso a Eventos Especiais", - ].map((item, index) => ( -
  • {item}
    • - ))} -
- - Saber mais{" "} - - - - - -
-
- ); -} diff --git a/components/CeSIUMLogo.tsx b/components/CeSIUMLogo/CeSIUMLogo.tsx similarity index 93% rename from components/CeSIUMLogo.tsx rename to components/CeSIUMLogo/CeSIUMLogo.tsx index d0311ef..f449fb0 100644 --- a/components/CeSIUMLogo.tsx +++ b/components/CeSIUMLogo/CeSIUMLogo.tsx @@ -4,7 +4,7 @@ type CeSIUMLogoProps = { color?: string; }; -export default function CeSIUMLogo(props: CeSIUMLogoProps) { +const CeSIUMLogo = (props: CeSIUMLogoProps) => { return ( ); -} +}; + +export default CeSIUMLogo; diff --git a/components/CeSIUMLogo/index.ts b/components/CeSIUMLogo/index.ts new file mode 100644 index 0000000..e8eacab --- /dev/null +++ b/components/CeSIUMLogo/index.ts @@ -0,0 +1 @@ +export { default } from "./CeSIUMLogo"; diff --git a/components/Footer.tsx b/components/Footer/Footer.tsx similarity index 91% rename from components/Footer.tsx rename to components/Footer/Footer.tsx index 612cd95..8f390cb 100644 --- a/components/Footer.tsx +++ b/components/Footer/Footer.tsx @@ -1,5 +1,7 @@ import type { ReactNode } from "react"; + import Image from "next/image"; + import { FaFacebookF, FaInstagram, @@ -8,11 +10,17 @@ import { FaYoutube, } from "react-icons/fa"; +type ListLinkProps = { + href: string; + text: string; +}; + type SocialLinkProps = { href: string; icon: ReactNode; }; +// Social Icons const SocialLink = ({ href, icon }: SocialLinkProps) => (
  • @@ -21,11 +29,7 @@ const SocialLink = ({ href, icon }: SocialLinkProps) => (
    • ); -type ListLinkProps = { - href: string; - text: string; -}; - +// Link from Links List const ListLink = ({ href, text }: ListLinkProps) => (
  • {text} @@ -35,17 +39,21 @@ const ListLink = ({ href, text }: ListLinkProps) => ( const Footer = () => { return (