From 6420d38e49d784ef0ccdae1ece67377c79f77dfd Mon Sep 17 00:00:00 2001 From: Leticia Dias Date: Mon, 27 Oct 2025 10:34:06 -0300 Subject: [PATCH 1/3] feat(components): reorganize components into layout and ui folders for better structure --- src/App.tsx | 4 +- src/AppRouter.tsx | 2 +- src/components/{ => layout}/footer/Footer.tsx | 6 +- .../{ => layout}/header/Header.module.css | 0 src/components/{ => layout}/header/Header.tsx | 6 +- src/components/{ => layout}/navbar/Navbar.tsx | 10 +- src/components/posts/mockPost.ts | 94 ------------------- src/components/{ => ui}/button/Button.tsx | 0 .../cardknowledger/CardKnowledger.tsx | 8 +- .../cardknowledger/mockKnowledgers.ts | 20 ++-- .../cardourpurpose/CardOurPurpose.tsx | 0 .../{ => ui}/cardourpurpose/mockDataCard.ts | 0 src/components/{ => ui}/posts/mockAuthor.ts | 16 ++-- src/components/ui/posts/mockPost.ts | 94 +++++++++++++++++++ src/components/{ => ui}/posts/post/Post.tsx | 4 +- .../{ => ui}/posts/postlist/PostList.tsx | 4 +- .../posts/postpreview/PostPreview.tsx | 4 +- src/pages/Knowledgers.tsx | 2 +- src/pages/Posts.tsx | 2 +- src/pages/Profile.tsx | 2 +- src/sections/SectionEvents.tsx | 2 +- src/sections/SectionFounders.tsx | 2 +- src/sections/SectionKnowledgers.tsx | 2 +- src/sections/SectionLatestPosts.tsx | 4 +- src/sections/SectionOurPurpose.tsx | 2 +- 25 files changed, 145 insertions(+), 145 deletions(-) rename src/components/{ => layout}/footer/Footer.tsx (82%) rename src/components/{ => layout}/header/Header.module.css (100%) rename src/components/{ => layout}/header/Header.tsx (83%) rename src/components/{ => layout}/navbar/Navbar.tsx (83%) delete mode 100644 src/components/posts/mockPost.ts rename src/components/{ => ui}/button/Button.tsx (100%) rename src/components/{ => ui}/cardknowledger/CardKnowledger.tsx (89%) rename src/components/{ => ui}/cardknowledger/mockKnowledgers.ts (71%) rename src/components/{ => ui}/cardourpurpose/CardOurPurpose.tsx (100%) rename src/components/{ => ui}/cardourpurpose/mockDataCard.ts (100%) rename src/components/{ => ui}/posts/mockAuthor.ts (82%) create mode 100644 src/components/ui/posts/mockPost.ts rename src/components/{ => ui}/posts/post/Post.tsx (96%) rename src/components/{ => ui}/posts/postlist/PostList.tsx (97%) rename src/components/{ => ui}/posts/postpreview/PostPreview.tsx (95%) diff --git a/src/App.tsx b/src/App.tsx index d81004d..0dcbe63 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ import React from "react"; import { BrowserRouter } from "react-router-dom"; -import { Header } from "./components/header/Header"; -import { Footer } from "./components/footer/Footer"; +import { Header } from "./components/layout/header/Header"; +import { Footer } from "./components/layout/footer/Footer"; import { AppRouter } from "./AppRouter"; diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index 14906ce..40c54ba 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Post } from "./components/posts/post/Post"; +import { Post } from "./components/ui/posts/post/Post"; import { About } from "./pages/About"; import { Knowledgers } from "./pages/Knowledgers"; import { Home } from "./pages/Home"; diff --git a/src/components/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx similarity index 82% rename from src/components/footer/Footer.tsx rename to src/components/layout/footer/Footer.tsx index 4508e9e..57ccd59 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/layout/footer/Footer.tsx @@ -1,8 +1,8 @@ import React, { useContext } from "react"; -import TechknowledgeMiniLogo from "../../assets/images/new-logo-darkmode.svg"; -import TechknowledgeMiniLogoLight from "../../assets/images/new-logo-lightmode.svg"; -import { ThemeContext } from "../../context/ThemeContext"; +import TechknowledgeMiniLogo from "../../../assets/images/new-logo-darkmode.svg"; +import TechknowledgeMiniLogoLight from "../../../assets/images/new-logo-lightmode.svg"; +import { ThemeContext } from "../../../context/ThemeContext"; export function Footer() { const { darkMode } = useContext(ThemeContext); diff --git a/src/components/header/Header.module.css b/src/components/layout/header/Header.module.css similarity index 100% rename from src/components/header/Header.module.css rename to src/components/layout/header/Header.module.css diff --git a/src/components/header/Header.tsx b/src/components/layout/header/Header.tsx similarity index 83% rename from src/components/header/Header.tsx rename to src/components/layout/header/Header.tsx index 8aea6db..0f96d1a 100644 --- a/src/components/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -3,11 +3,11 @@ import { Moon, Sun } from "@phosphor-icons/react"; import { Link } from "react-router-dom"; import { Navbar } from "../navbar/Navbar"; -import { ThemeContext } from "../../context/ThemeContext"; +import { ThemeContext } from "../../../context/ThemeContext"; import styles from "./Header.module.css"; -import techknowledgeLogoDark from "../../assets/images/new-logo-darkmode.svg"; -import techknowledgeLogoLight from "../../assets/images/new-logo-lightmode.svg"; +import techknowledgeLogoDark from "../../../assets/images/new-logo-darkmode.svg"; +import techknowledgeLogoLight from "../../../assets/images/new-logo-lightmode.svg"; export function Header() { const { darkMode, toggleDarkMode } = useContext(ThemeContext); diff --git a/src/components/navbar/Navbar.tsx b/src/components/layout/navbar/Navbar.tsx similarity index 83% rename from src/components/navbar/Navbar.tsx rename to src/components/layout/navbar/Navbar.tsx index c595d01..9fc3bd8 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/layout/navbar/Navbar.tsx @@ -1,12 +1,12 @@ import React, { useContext, useState } from "react"; -import CloseDark from "../../assets/icons/close.svg"; -import MenuHamburgerDark from "../../assets/icons/menu.svg"; -import CloseLight from "../../assets/icons/close-light.svg"; -import MenuHamburgerLight from "../../assets/images/menu-hamburger-lightmode.png"; +import CloseDark from "../../../assets/icons/close.svg"; +import MenuHamburgerDark from "../../../assets/icons/menu.svg"; +import CloseLight from "../../../assets/icons/close-light.svg"; +import MenuHamburgerLight from "../../../assets/images/menu-hamburger-lightmode.png"; import { Link } from "react-router-dom"; -import { ThemeContext } from "../../context/ThemeContext"; +import { ThemeContext } from "../../../context/ThemeContext"; export function Navbar() { const [open, setOpen] = useState(false); diff --git a/src/components/posts/mockPost.ts b/src/components/posts/mockPost.ts deleted file mode 100644 index dedc819..0000000 --- a/src/components/posts/mockPost.ts +++ /dev/null @@ -1,94 +0,0 @@ -import thumbFazFuncionar from "../../assets/images/thumbnails/faz-funcionar-e-depois-melhora.jpeg"; -import thumbOlimpiadaConhecimento from "../../assets/images/thumbnails/olimpiada-do-conhecimento.jpeg"; -import thumbTechknowledge from "../../assets/images/thumbnails/techknowledge.jpeg"; -import thumbDevFrontend from "../../assets/images/thumbnails/thumbnail-dev-frontend.jpg"; -import thumbErrandoAprende from "../../assets/images/thumbnails/errando-que-se-aprende.jpg"; -import thumbPratiqueComoDev from "../../assets/images/thumbnails/pratique-como-ser-um-dev.jpg"; -import thumbMinhasInterfaces from "../../assets/images/thumbnails/criando-minhas-interfaces.jpg"; -import thumbMobile2025 from "../../assets/images/thumbnails/desenvolvimento-mobile-2025.jpg"; -import thumbMorarFora from "../../assets/images/thumbnails/morar-fora-do-brasil-vale-a-pena.jpg"; -import thumbFreelancerPassos from "../../assets/images/thumbnails/primeiros-passos-como-freelancer.jpg"; -import thumbComponentes from "../../assets/images/thumbnails/componentes.jpg"; -import thumbTailwindMobileFirst from "../../assets/images/thumbnails/tailwind-mobile-first.jpg"; -import thumbTailwindFerramentaPoderosa from "../../assets/images/thumbnails/tailwind-ferramenta-poderosa.jpg"; -import thumbComponentesGenericosParte01 from "../../assets/images/thumbnails/componentes-genericos-parte-01.jpg"; -import thumbComponentesGenericosParte02 from "../../assets/images/thumbnails/componentes-genericos-parte-02.jpg"; -import thumbEntendendoAlgoritmos from "../../assets/images/thumbnails/entendendo-algoritmos.jpg"; -import thumbTailwindCSSV4 from "../../assets/images/thumbnails/tailwind-css-v4.jpg"; - -export const mockPost = [ - { - id: 1, - coverImage: thumbFazFuncionar, - }, - { - id: 2, - coverImage: thumbOlimpiadaConhecimento, - }, - { - id: 3, - coverImage: thumbTechknowledge, - }, - { - id: 4, - coverImage: thumbFazFuncionar, - }, - { - id: 5, - coverImage: thumbDevFrontend, - }, - { - id: 6, - coverImage: thumbErrandoAprende, - }, - { - id: 7, - coverImage: thumbPratiqueComoDev, - }, - { - id: 8, - coverImage: thumbMinhasInterfaces, - }, - { - id: 9, - coverImage: thumbMobile2025, - }, - { - id: 12, - coverImage: thumbMorarFora, - }, - { - id: 13, - coverImage: thumbFreelancerPassos, - }, - { - id: 14, - coverImage: thumbComponentes, - }, - { - id: 15, - coverImage: thumbTailwindMobileFirst, - }, - { - id: 16, - coverImage: thumbTailwindFerramentaPoderosa, - }, - { - id: 17, - coverImage: thumbComponentesGenericosParte01, - }, - { - id: 18, - coverImage: thumbComponentesGenericosParte02, - }, - - { - id: 19, - coverImage: thumbEntendendoAlgoritmos, - }, - - { - id: 20, - coverImage: thumbTailwindCSSV4, - }, -]; diff --git a/src/components/button/Button.tsx b/src/components/ui/button/Button.tsx similarity index 100% rename from src/components/button/Button.tsx rename to src/components/ui/button/Button.tsx diff --git a/src/components/cardknowledger/CardKnowledger.tsx b/src/components/ui/cardknowledger/CardKnowledger.tsx similarity index 89% rename from src/components/cardknowledger/CardKnowledger.tsx rename to src/components/ui/cardknowledger/CardKnowledger.tsx index f4ded24..1c817bb 100644 --- a/src/components/cardknowledger/CardKnowledger.tsx +++ b/src/components/ui/cardknowledger/CardKnowledger.tsx @@ -1,11 +1,11 @@ import React, { useEffect, useState } from "react"; -import { getUsers } from "../../services/usersService"; +import { getUsers } from "../../../services/usersService"; import { mockKnowledgers } from "./mockKnowledgers"; -import flagBrasil from "../../assets/images/bandeira-de-brasil.png"; -import flagAlagoas from "../../assets/images/bandeira-de-alagoas.png"; -import flagPara from "../../assets/images/bandeira-do-para.png"; +import flagBrasil from "../../../assets/images/bandeira-de-brasil.png"; +import flagAlagoas from "../../../assets/images/bandeira-de-alagoas.png"; +import flagPara from "../../../assets/images/bandeira-do-para.png"; import { Link } from "react-router"; interface UserProps { diff --git a/src/components/cardknowledger/mockKnowledgers.ts b/src/components/ui/cardknowledger/mockKnowledgers.ts similarity index 71% rename from src/components/cardknowledger/mockKnowledgers.ts rename to src/components/ui/cardknowledger/mockKnowledgers.ts index 9c80d7c..b0d7169 100644 --- a/src/components/cardknowledger/mockKnowledgers.ts +++ b/src/components/ui/cardknowledger/mockKnowledgers.ts @@ -1,14 +1,14 @@ -import knowledgerMonique from "../../assets/images/knowledgers/monique.png"; -import knowledgerLeonardo from "../../assets/images/knowledgers/leonardo.png"; -import knowledgerAlves from "../../assets/images/knowledgers/alves.png"; -import knowledgerJoao from "../../assets/images/knowledgers/joao.png"; -import knowledgerDaniel from "../../assets/images/knowledgers/daniel.png"; +import knowledgerMonique from "../../../assets/images/knowledgers/monique.png"; +import knowledgerLeonardo from "../../../assets/images/knowledgers/leonardo.png"; +import knowledgerAlves from "../../../assets/images/knowledgers/alves.png"; +import knowledgerJoao from "../../../assets/images/knowledgers/joao.png"; +import knowledgerDaniel from "../../../assets/images/knowledgers/daniel.png"; -import LeonardoProfileImage from "../../assets/images/leonardo-profile-image.png"; -import AlvesProfileImage from "../../assets/images/image-alves-profile.png"; -import MoniqueProfileImage from "../../assets/images/image-monique-profile.png"; -import JoaoProfileImage from "../../assets/images/image-monique-profile.png"; -import DanielProfileImage from "../../assets/images/image-daniel-profile.png"; +import LeonardoProfileImage from "../../../assets/images/leonardo-profile-image.png"; +import AlvesProfileImage from "../../../assets/images/image-alves-profile.png"; +import MoniqueProfileImage from "../../../assets/images/image-monique-profile.png"; +import JoaoProfileImage from "../../../assets/images/image-monique-profile.png"; +import DanielProfileImage from "../../../assets/images/image-daniel-profile.png"; import { GithubLogo, InstagramLogo, LinkedinLogo } from "@phosphor-icons/react"; diff --git a/src/components/cardourpurpose/CardOurPurpose.tsx b/src/components/ui/cardourpurpose/CardOurPurpose.tsx similarity index 100% rename from src/components/cardourpurpose/CardOurPurpose.tsx rename to src/components/ui/cardourpurpose/CardOurPurpose.tsx diff --git a/src/components/cardourpurpose/mockDataCard.ts b/src/components/ui/cardourpurpose/mockDataCard.ts similarity index 100% rename from src/components/cardourpurpose/mockDataCard.ts rename to src/components/ui/cardourpurpose/mockDataCard.ts diff --git a/src/components/posts/mockAuthor.ts b/src/components/ui/posts/mockAuthor.ts similarity index 82% rename from src/components/posts/mockAuthor.ts rename to src/components/ui/posts/mockAuthor.ts index 9c7daf5..f8c10a4 100644 --- a/src/components/posts/mockAuthor.ts +++ b/src/components/ui/posts/mockAuthor.ts @@ -1,11 +1,11 @@ -import authorLeticia from "../../assets/images/authors/leticia.jpeg"; -import authorMikael from "../../assets/images/authors/mikael.jpeg"; -import authorJoaoJacinto from "../../assets/images/authors/joao-jacinto.jpeg"; -import auhtorMoniqueCampos from "../../assets/images/authors/monique-campos.jpeg"; -import authorLeonardo from "../../assets/images/authors/leonardo.jpeg"; -import authorPedroMiguel from "../../assets/images/authors/pedro-miguel.png"; -import authorLucasAlves from "../../assets/images/authors/lucasalves.jpeg"; -import authorAlvesJhonata from "../../assets/images/authors/alves-jhonata.png"; +import authorLeticia from "../../../assets/images/authors/leticia.jpeg"; +import authorMikael from "../../../assets/images/authors/mikael.jpeg"; +import authorJoaoJacinto from "../../../assets/images/authors/joao-jacinto.jpeg"; +import auhtorMoniqueCampos from "../../../assets/images/authors/monique-campos.jpeg"; +import authorLeonardo from "../../../assets/images/authors/leonardo.jpeg"; +import authorPedroMiguel from "../../../assets/images/authors/pedro-miguel.png"; +import authorLucasAlves from "../../../assets/images/authors/lucasalves.jpeg"; +import authorAlvesJhonata from "../../../assets/images/authors/alves-jhonata.png"; export const mockAuthor = [ { diff --git a/src/components/ui/posts/mockPost.ts b/src/components/ui/posts/mockPost.ts new file mode 100644 index 0000000..b786109 --- /dev/null +++ b/src/components/ui/posts/mockPost.ts @@ -0,0 +1,94 @@ +import thumbFazFuncionar from "../../../assets/images/thumbnails/faz-funcionar-e-depois-melhora.jpeg"; +import thumbOlimpiadaConhecimento from "../../../assets/images/thumbnails/olimpiada-do-conhecimento.jpeg"; +import thumbTechknowledge from "../../../assets/images/thumbnails/techknowledge.jpeg"; +import thumbDevFrontend from "../../../assets/images/thumbnails/thumbnail-dev-frontend.jpg"; +import thumbErrandoAprende from "../../../assets/images/thumbnails/errando-que-se-aprende.jpg"; +import thumbPratiqueComoDev from "../../../assets/images/thumbnails/pratique-como-ser-um-dev.jpg"; +import thumbMinhasInterfaces from "../../../assets/images/thumbnails/criando-minhas-interfaces.jpg"; +import thumbMobile2025 from "../../../assets/images/thumbnails/desenvolvimento-mobile-2025.jpg"; +import thumbMorarFora from "../../../assets/images/thumbnails/morar-fora-do-brasil-vale-a-pena.jpg"; +import thumbFreelancerPassos from "../../../assets/images/thumbnails/primeiros-passos-como-freelancer.jpg"; +import thumbComponentes from "../../../assets/images/thumbnails/componentes.jpg"; +import thumbTailwindMobileFirst from "../../../assets/images/thumbnails/tailwind-mobile-first.jpg"; +import thumbTailwindFerramentaPoderosa from "../../../assets/images/thumbnails/tailwind-ferramenta-poderosa.jpg"; +import thumbComponentesGenericosParte01 from "../../../assets/images/thumbnails/componentes-genericos-parte-01.jpg"; +import thumbComponentesGenericosParte02 from "../../../assets/images/thumbnails/componentes-genericos-parte-02.jpg"; +import thumbEntendendoAlgoritmos from "../../../assets/images/thumbnails/entendendo-algoritmos.jpg"; +import thumbTailwindCSSV4 from "../../../assets/images/thumbnails/tailwind-css-v4.jpg"; + +export const mockPost = [ + { + id: 1, + coverImage: thumbFazFuncionar, + }, + { + id: 2, + coverImage: thumbOlimpiadaConhecimento, + }, + { + id: 3, + coverImage: thumbTechknowledge, + }, + { + id: 4, + coverImage: thumbFazFuncionar, + }, + { + id: 5, + coverImage: thumbDevFrontend, + }, + { + id: 6, + coverImage: thumbErrandoAprende, + }, + { + id: 7, + coverImage: thumbPratiqueComoDev, + }, + { + id: 8, + coverImage: thumbMinhasInterfaces, + }, + { + id: 9, + coverImage: thumbMobile2025, + }, + { + id: 12, + coverImage: thumbMorarFora, + }, + { + id: 13, + coverImage: thumbFreelancerPassos, + }, + { + id: 14, + coverImage: thumbComponentes, + }, + { + id: 15, + coverImage: thumbTailwindMobileFirst, + }, + { + id: 16, + coverImage: thumbTailwindFerramentaPoderosa, + }, + { + id: 17, + coverImage: thumbComponentesGenericosParte01, + }, + { + id: 18, + coverImage: thumbComponentesGenericosParte02, + }, + + { + id: 19, + coverImage: thumbEntendendoAlgoritmos, + }, + + { + id: 20, + coverImage: thumbTailwindCSSV4, + }, +]; diff --git a/src/components/posts/post/Post.tsx b/src/components/ui/posts/post/Post.tsx similarity index 96% rename from src/components/posts/post/Post.tsx rename to src/components/ui/posts/post/Post.tsx index 7aee921..6f55b66 100644 --- a/src/components/posts/post/Post.tsx +++ b/src/components/ui/posts/post/Post.tsx @@ -1,8 +1,8 @@ import React from "react"; import { useEffect, useState } from "react"; -import { getPostBySlug } from "../../../services/postsService"; +import { getPostBySlug } from "../../../../services/postsService"; import ReactMarkdown from "react-markdown"; -import { formatDateToCustomFormat } from "../../../utils/formatDate"; +import { formatDateToCustomFormat } from "../../../../utils/formatDate"; import rehypeHighlight from "rehype-highlight"; import "highlight.js/styles/github-dark.css"; diff --git a/src/components/posts/postlist/PostList.tsx b/src/components/ui/posts/postlist/PostList.tsx similarity index 97% rename from src/components/posts/postlist/PostList.tsx rename to src/components/ui/posts/postlist/PostList.tsx index fe24349..fcd7a5c 100644 --- a/src/components/posts/postlist/PostList.tsx +++ b/src/components/ui/posts/postlist/PostList.tsx @@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react"; import { ArrowRight, Clock } from "@phosphor-icons/react"; import { Link } from "react-router-dom"; -import { formatDateToLong } from "../../../utils/formatDate"; -import { getPosts } from "../../../services/postsService"; +import { formatDateToLong } from "../../../../utils/formatDate"; +import { getPosts } from "../../../../services/postsService"; export interface PostType { id: number; diff --git a/src/components/posts/postpreview/PostPreview.tsx b/src/components/ui/posts/postpreview/PostPreview.tsx similarity index 95% rename from src/components/posts/postpreview/PostPreview.tsx rename to src/components/ui/posts/postpreview/PostPreview.tsx index 43c797b..1a5cd3a 100644 --- a/src/components/posts/postpreview/PostPreview.tsx +++ b/src/components/ui/posts/postpreview/PostPreview.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; -import { formatDateToLong } from "../../../utils/formatDate"; +import { formatDateToLong } from "../../../../utils/formatDate"; import { PostType } from "../postlist/PostList"; -import { getPosts } from "../../../services/postsService"; +import { getPosts } from "../../../../services/postsService"; import { mockPost } from "../mockPost"; diff --git a/src/pages/Knowledgers.tsx b/src/pages/Knowledgers.tsx index d71ebcd..cf780ac 100644 --- a/src/pages/Knowledgers.tsx +++ b/src/pages/Knowledgers.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { CardKnowledger } from "../components/cardknowledger/CardKnowledger"; +import { CardKnowledger } from "../components/ui/cardknowledger/CardKnowledger"; export function Knowledgers() { return ( diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index 967309c..244df06 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { PostList } from "../components/posts/postlist/PostList"; +import { PostList } from "../components/ui/posts/postlist/PostList"; export function Posts() { return ( diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 64a768a..484691f 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { getUserByUsername } from "../services/usersService"; -import { mockKnowledgers } from "../components/cardknowledger/mockKnowledgers"; +import { mockKnowledgers } from "../components/ui/cardknowledger/mockKnowledgers"; import { Link } from "react-router"; interface UserProps { diff --git a/src/sections/SectionEvents.tsx b/src/sections/SectionEvents.tsx index 29dca67..e34ce7f 100644 --- a/src/sections/SectionEvents.tsx +++ b/src/sections/SectionEvents.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Button } from "../components/button/Button"; +import { Button } from "../components/ui/button/Button"; import rocketImage from "../assets/images/rocket.svg"; diff --git a/src/sections/SectionFounders.tsx b/src/sections/SectionFounders.tsx index 82646fd..201eae2 100644 --- a/src/sections/SectionFounders.tsx +++ b/src/sections/SectionFounders.tsx @@ -3,7 +3,7 @@ import React, { useContext } from "react"; import ImageFoundersDark from "../assets/images/founders-darkmode.png"; import ImageFoundersLight from "../assets/images/founders-lightmode.png"; -import { Button } from "../components/button/Button"; +import { Button } from "../components/ui/button/Button"; import { ThemeContext } from "../context/ThemeContext"; export function SectionFounders() { diff --git a/src/sections/SectionKnowledgers.tsx b/src/sections/SectionKnowledgers.tsx index b02c3ff..50b3ad1 100644 --- a/src/sections/SectionKnowledgers.tsx +++ b/src/sections/SectionKnowledgers.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Button } from "../components/button/Button"; +import { Button } from "../components/ui/button/Button"; import knowledgersImage from "../assets/images/knowledgers.png"; diff --git a/src/sections/SectionLatestPosts.tsx b/src/sections/SectionLatestPosts.tsx index d21c9db..8cd99b5 100644 --- a/src/sections/SectionLatestPosts.tsx +++ b/src/sections/SectionLatestPosts.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { PostPreview } from "../components/posts/postpreview/PostPreview"; -import { Button } from "../components/button/Button"; +import { PostPreview } from "../components/ui/posts/postpreview/PostPreview"; +import { Button } from "../components/ui/button/Button"; export function SectionLatestPosts() { return ( diff --git a/src/sections/SectionOurPurpose.tsx b/src/sections/SectionOurPurpose.tsx index 39f94c2..acad144 100644 --- a/src/sections/SectionOurPurpose.tsx +++ b/src/sections/SectionOurPurpose.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { CardOurPurpose } from "../components/cardourpurpose/CardOurPurpose"; +import { CardOurPurpose } from "../components/ui/cardourpurpose/CardOurPurpose"; export function SectionOurPurpose() { return ( From 566267612fc6648720fcebcdafe69d449f120422 Mon Sep 17 00:00:00 2001 From: Leticia Dias Date: Mon, 27 Oct 2025 18:56:39 -0300 Subject: [PATCH 2/3] feat(header): added responsive menu modal with transition animation --- src/components/layout/navbar/Navbar.tsx | 50 ++++++++++-------- src/components/ui/menuModal/menuModal.tsx | 64 +++++++++++++++++++++++ 2 files changed, 91 insertions(+), 23 deletions(-) create mode 100644 src/components/ui/menuModal/menuModal.tsx diff --git a/src/components/layout/navbar/Navbar.tsx b/src/components/layout/navbar/Navbar.tsx index 9fc3bd8..789c4d5 100644 --- a/src/components/layout/navbar/Navbar.tsx +++ b/src/components/layout/navbar/Navbar.tsx @@ -1,12 +1,9 @@ import React, { useContext, useState } from "react"; - -import CloseDark from "../../../assets/icons/close.svg"; -import MenuHamburgerDark from "../../../assets/icons/menu.svg"; -import CloseLight from "../../../assets/icons/close-light.svg"; -import MenuHamburgerLight from "../../../assets/images/menu-hamburger-lightmode.png"; - import { Link } from "react-router-dom"; +import { List } from "@phosphor-icons/react"; + import { ThemeContext } from "../../../context/ThemeContext"; +import { MenuModal } from "../../ui/menuModal/menuModal"; export function Navbar() { const [open, setOpen] = useState(false); @@ -21,28 +18,33 @@ export function Navbar() { ]; return ( -
-
+
-
    + + +
      {routes.map(({ path, label }) => ( -
    • +
    • ))}
    -
+ + setOpen(false)} routes={routes} /> + ); } diff --git a/src/components/ui/menuModal/menuModal.tsx b/src/components/ui/menuModal/menuModal.tsx new file mode 100644 index 0000000..6f2ffaf --- /dev/null +++ b/src/components/ui/menuModal/menuModal.tsx @@ -0,0 +1,64 @@ +import React from "react"; + +import TechknowledgeLightLogo from "../../../assets/images/new-logo-lightmode.svg"; +import { X } from "@phosphor-icons/react"; +import { Link } from "react-router"; + +interface RouteProps { + path: string; + label: string; +} + +interface MenuModalProps { + isOpen: boolean; + onClose: () => void; + routes: RouteProps[]; +} + +export function MenuModal({ isOpen, onClose, routes }: MenuModalProps) { + if (!isOpen) return null; + + return ( +
+
+
+ + + +
+ +
    + {routes.map(({ path, label }) => ( +
  • + + {label} + +
    • + ))} +
+ +
+

+ © Todos os direitos reservados ao Techknowledge. +

+
+
+
+ ); +} From c84b7b71a743ac45695d8f809ec02fe7a089b227 Mon Sep 17 00:00:00 2001 From: Leticia Dias Date: Mon, 27 Oct 2025 18:57:29 -0300 Subject: [PATCH 3/3] feat(tailwind): scaleUp animation created --- tailwind.config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 62612d7..1b7ff05 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,5 @@ +import { transform } from "typescript"; + /** @type {import('tailwindcss').Config} */ export default { darkMode: "class", @@ -42,10 +44,16 @@ export default { "0%, 100%": { transform: "translateX(-50%) scaleX(1)" }, "50%": { transform: "translateX(-50%) scaleX(0.6)", opacity: "0.15" }, }, + + scaleUp: { + from: { transform: "scale(0.95)", opacity: 0 }, + to: { transform: "scale(1)", opacity: 1 }, + }, }, animation: { bounceSoft: "bounceSoft 3s ease-in-out infinite", shadowShrink: "shadowShrink 3s ease-in-out infinite", + scaleUp: "scaleUp 0.25s ease", }, }, },