From 754335fa5005f844df64072a9b89f393339b91a7 Mon Sep 17 00:00:00 2001 From: mateusriff Date: Sat, 3 Feb 2024 11:53:59 -0300 Subject: [PATCH] enhancement: enhance various pages and components --- .../components/Categories/index.tsx | 5 +- .../components/Category/Category.tsx | 19 +++++- .../components/Category/interfaces.ts | 1 + .../components/Header/interfaces.ts | 2 +- src/components/Home/BannerV2/Banner.styles.ts | 2 +- src/components/Home/Bannerv3/index.tsx | 19 ++++++ src/components/Home/Bannerv3/style.ts | 58 +++++++++++++++++++ src/components/Home/Sponsors/Sponsors.tsx | 5 +- src/components/Navbar/Navbar.tsx | 1 + .../Navbar/components/Menu/Menu.tsx | 2 + .../Navbar/components/Menu/index.tsx | 2 + src/components/Navbar/index.tsx | 2 + src/components/Navbar/interfaces.ts | 1 + .../PublicationCard/PublicationCard.styles.ts | 10 +++- .../Publications/PublicationsList/index.tsx | 34 ++++++++--- .../Publications/TDPSection/TDPSection.tsx | 4 +- src/components/index.ts | 2 +- src/pages/index.tsx | 2 +- 18 files changed, 147 insertions(+), 24 deletions(-) create mode 100644 src/components/Home/Bannerv3/index.tsx create mode 100644 src/components/Home/Bannerv3/style.ts diff --git a/src/components/CategoriesPage/components/Categories/index.tsx b/src/components/CategoriesPage/components/Categories/index.tsx index f311aa3..65bffbd 100644 --- a/src/components/CategoriesPage/components/Categories/index.tsx +++ b/src/components/CategoriesPage/components/Categories/index.tsx @@ -2,15 +2,14 @@ import React from 'react' import SSL from './assets/small-size-league.png' import VSS from './assets/very-small-size-league.png' -import Simulation from './assets/2d-simulation.png' -import Drone from './assets/drone.jpeg' +import { Drone, TwoDimensionSim } from '@/assets' import Main from './Categories' import { CategoriesDefaultProps } from './interfaces' const Categories = ({ translate }: CategoriesDefaultProps) => { - const images = [SSL, VSS, Simulation, Drone] + const images = [SSL, VSS, TwoDimensionSim, Drone] return
} diff --git a/src/components/CategoriesPage/components/Category/Category.tsx b/src/components/CategoriesPage/components/Category/Category.tsx index 41a4785..5fc5a4d 100644 --- a/src/components/CategoriesPage/components/Category/Category.tsx +++ b/src/components/CategoriesPage/components/Category/Category.tsx @@ -1,4 +1,7 @@ import React from 'react' +import { useRouter } from 'next/router' + +import { resultsTables } from '@/data/tables' import { ExpandableTable } from '@/components' @@ -6,6 +9,16 @@ import { CategoryDefaultProps } from './interfaces' import * as S from './Category.styles' +type ResultTableKey = 'vssl' | 'ssl' | 'simulation' | 'drone' +type localeType = 'en' | 'pt-BR' + +const titleMap: Record = { + 'Small Size League': 'ssl', + 'Very Small Size League': 'vssl', + '2D Simulation': 'simulation', + 'Drone': 'drone', +} + const Category = ({ title, image, @@ -13,6 +26,10 @@ const Category = ({ description, approaches, }: CategoryDefaultProps) => { + const router = useRouter() + const { locale } = router + const lang = locale === 'en' ? 'en' : 'ptBR' + return ( @@ -45,7 +62,7 @@ const Category = ({ )} - + ) diff --git a/src/components/CategoriesPage/components/Category/interfaces.ts b/src/components/CategoriesPage/components/Category/interfaces.ts index 8f0daca..94b1eb7 100644 --- a/src/components/CategoriesPage/components/Category/interfaces.ts +++ b/src/components/CategoriesPage/components/Category/interfaces.ts @@ -9,4 +9,5 @@ export interface CategoryDefaultProps { competitions: string description: string approaches?: Approach[] + tables?: any[] } diff --git a/src/components/CategoriesPage/components/Header/interfaces.ts b/src/components/CategoriesPage/components/Header/interfaces.ts index 98b4bef..0584bd0 100644 --- a/src/components/CategoriesPage/components/Header/interfaces.ts +++ b/src/components/CategoriesPage/components/Header/interfaces.ts @@ -4,5 +4,5 @@ export interface CategoriesHeaderProps { description: string categories: string[] } - scrollToSection: (sectionId: string) => void + scrollToSection?: (sectionId: string) => void } diff --git a/src/components/Home/BannerV2/Banner.styles.ts b/src/components/Home/BannerV2/Banner.styles.ts index 4aa32d1..7ba602f 100644 --- a/src/components/Home/BannerV2/Banner.styles.ts +++ b/src/components/Home/BannerV2/Banner.styles.ts @@ -19,7 +19,7 @@ export const TextContainer = styled.div` margin: auto; padding: auto; color: white; - text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.8); + text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); @media (max-width: 768px) { padding: 0; diff --git a/src/components/Home/Bannerv3/index.tsx b/src/components/Home/Bannerv3/index.tsx new file mode 100644 index 0000000..9581cb6 --- /dev/null +++ b/src/components/Home/Bannerv3/index.tsx @@ -0,0 +1,19 @@ +import Image from 'next/image' +import { StyledBanner, StyledImage, StyledContent } from './style' +import { Robot } from '@/assets' + +const Banner = ({ translate }: { translate: any }) => { + return ( + + + +

+ RobôCIn: {translate.title} +

+

{translate.complement}

+ + + ) +} + +export default Banner diff --git a/src/components/Home/Bannerv3/style.ts b/src/components/Home/Bannerv3/style.ts new file mode 100644 index 0000000..3bb9a7b --- /dev/null +++ b/src/components/Home/Bannerv3/style.ts @@ -0,0 +1,58 @@ +import Image from 'next/image' +import styled from 'styled-components' + +export const StyledBanner = styled.section` + padding: 12vh 12vw 6vh; + min-height: 100vh; + + display: flex; + justify-content: space-between; + align-items: center; + gap: 2vw; + + @media (max-width: 768px) { + flex-direction: column; + } +` + +export const StyledImage = styled(Image)` + width: calc(16vw + 200px); + height: auto; + + @media (max-width: 768px) { + width: 80vw; + } +` + +export const StyledContent = styled.div` + text-align: right; + width: calc(48vw + 2rem); + + h2 { + font-size: calc(0.3rem + 3vw); + font-weight: 900; + margin-bottom: calc(2vh + 1rem); + + span { + color: #469c57; + } + } + + p { + font-size: calc(0.8rem + 0.75vw); + } + + @media (max-width: 768px) { + text-align: left; + width: calc(80vw + 2rem); + + h2 { + font-size: calc(2rem + 1vw); + margin-bottom: calc(4vh + 0.5rem); + } + + p { + font-size: calc(1.6rem + 0.3vw); + } + } +` diff --git a/src/components/Home/Sponsors/Sponsors.tsx b/src/components/Home/Sponsors/Sponsors.tsx index bbe7844..c6c5f18 100644 --- a/src/components/Home/Sponsors/Sponsors.tsx +++ b/src/components/Home/Sponsors/Sponsors.tsx @@ -44,10 +44,7 @@ const Sponsors = ({ translate }: SponsorsProps) => { target="_blank" rel="noopener noreferrer" > - - - robocin@cin.ufpe.br - + 📫 robocin@cin.ufpe.br diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index b6d7d30..a44af99 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -58,6 +58,7 @@ const Navbar = ({ languages={languages} router={router} locale={locale} + onNavigate={onPressMenu} onChangeLanguage={onChangeLanguage} data-testid="menu" /> diff --git a/src/components/Navbar/components/Menu/Menu.tsx b/src/components/Navbar/components/Menu/Menu.tsx index 3acac6f..beedb3f 100644 --- a/src/components/Navbar/components/Menu/Menu.tsx +++ b/src/components/Navbar/components/Menu/Menu.tsx @@ -9,6 +9,7 @@ const Menu = ({ languages, router, locale, + onNavigate, onChangeLanguage, }: Omit) => { return ( @@ -18,6 +19,7 @@ const Menu = ({ key={index + option.label} href={option.link} active={router?.asPath === option.link ? 'true' : 'false'} + onClick={onNavigate} > {option.label} diff --git a/src/components/Navbar/components/Menu/index.tsx b/src/components/Navbar/components/Menu/index.tsx index fa90f3c..a1faf37 100644 --- a/src/components/Navbar/components/Menu/index.tsx +++ b/src/components/Navbar/components/Menu/index.tsx @@ -9,6 +9,7 @@ const Menu = ({ languages, router, locale, + onNavigate, onChangeLanguage, }: Omit) => { return ( @@ -17,6 +18,7 @@ const Menu = ({ languages={languages} router={router} locale={locale} + onNavigate={onNavigate} onChangeLanguage={onChangeLanguage} /> ) diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 3107c3d..af84a6c 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -44,6 +44,8 @@ const Navbar = () => { } const handleMenu = () => { + console.log('menu') + setOpenMenu((prev) => !prev) } diff --git a/src/components/Navbar/interfaces.ts b/src/components/Navbar/interfaces.ts index 27eaa19..b76802b 100644 --- a/src/components/Navbar/interfaces.ts +++ b/src/components/Navbar/interfaces.ts @@ -17,5 +17,6 @@ export interface NavbarProps { locale?: string isMenuOpen?: boolean onChangeLanguage?: React.ChangeEventHandler + onNavigate?: () => void onPressMenu?: () => void } diff --git a/src/components/Publications/PublicationCard/PublicationCard.styles.ts b/src/components/Publications/PublicationCard/PublicationCard.styles.ts index 740ccf9..7313613 100644 --- a/src/components/Publications/PublicationCard/PublicationCard.styles.ts +++ b/src/components/Publications/PublicationCard/PublicationCard.styles.ts @@ -52,7 +52,7 @@ export const ContentWrapper = styled.div` display: flex; flex-direction: column; justify-content: space-between; - gap: 24px; + gap: 16px; padding: 36px; overflow: hidden; ` @@ -81,10 +81,14 @@ export const Description = styled.p` overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 5; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: auto; + + overflow: hidden; + text-overflow: ellipsis; + flex-wrap: nowrap; ` export const LinkWrapper = styled.a` @@ -99,6 +103,8 @@ export const LinkIcon = styled(Image)` ` export const LinkLabel = styled(Title)` + margin-left: 8px; + font-size: 1.2rem; text-transform: uppercase; text-decoration: underline; ` diff --git a/src/components/Publications/PublicationsList/index.tsx b/src/components/Publications/PublicationsList/index.tsx index 84ecf08..d91cb8e 100644 --- a/src/components/Publications/PublicationsList/index.tsx +++ b/src/components/Publications/PublicationsList/index.tsx @@ -1,17 +1,27 @@ -import React, { useState, useMemo } from 'react' +import React, { useState, useMemo, useEffect } from 'react' +import publications from '@/data/publications' import Main from './PublicationsList' import { PublicationsListDefaultProps } from './interfaces' +import { useRouter } from 'next/router' const PublicationsList = ({ translate, - publications, -}: PublicationsListDefaultProps) => { - const [filteredPublications, setFilteredPublications] = useState(publications) +}: // publications, +PublicationsListDefaultProps) => { + const router = useRouter() + const { locale } = router + const language = locale === 'en' ? 'en' : 'ptBR' - const currentDate = new Date() - const currentYear = currentDate.getFullYear() + const [lang, setLang] = useState(language) + const [filteredPublications, setFilteredPublications] = useState( + publications[lang] + ) + + // const currentDate = new Date() + // const currentYear = currentDate.getFullYear() + const currentYear = 2020 const yearFilterOptions = useMemo(() => { const startYear = 2016 @@ -43,16 +53,24 @@ const PublicationsList = ({ const { value: filterValue } = e.target if (filterValue === 'all') { - setFilteredPublications(publications) + setFilteredPublications(publications[lang]) return } - const filteredData = publications.filter( + const filteredData = publications[lang].filter( (publication) => publication.year === filterValue ) setFilteredPublications(filteredData) } + useEffect(() => { + setLang(locale === 'en' ? 'en' : 'ptBR') + }, [locale]) + + useEffect(() => { + setFilteredPublications(publications[lang]) + }, [lang]) + return (
{ return ( <> - + {translate.title} {translate.description} diff --git a/src/components/index.ts b/src/components/index.ts index ef39d48..c556bfc 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,7 +6,7 @@ import InfoPopup from './InfoPopup' import Activities from './Home/Activities' import AboutUs from './Home/AboutUs' import Sponsors from './Home/Sponsors' -import Banner from './Home/BannerV2' +import Banner from './Home/Bannerv3' export { Navbar, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 90e41f6..9bcb250 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -13,7 +13,7 @@ export default function Home() { return ( - +