Merge pull request #18 from butecodosdevs/viihuugo

[REFACTOR] - Front End
butecodosdevs · May 11, 2024 · 50d2ff9 · 50d2ff9
2 parents ef884e0 + 8ba3719
commit 50d2ff9
Show file tree

Hide file tree

Showing 21 changed files with 82 additions and 63 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
@@ -14,7 +14,7 @@
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
   }
-}
+} */
 
 * {
   box-sizing: border-box;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,8 @@ import './globals.css'
 import AppContextProvider from '@/context/AppContext';
 import SideBar from '@/components/SideBar';
 import Loading from '@/components/Loading';
+import Footer from '@/components/Footer';
+import Navbar from '@/components/Menu/Navbar';
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -18,10 +20,11 @@ export default function RootLayout({
       <body suppressHydrationWarning={true} className={inter.className}>
         <AppContextProvider>
           <Loading></Loading>
-          <div className='flex overflow-x-hidden flex-nowrap min-h-screen w-auto bg-slate-900'>
-            <SideBar></SideBar>
-            <main className='w-full p-2 relative'>
+          <div className='flex overflow-x-hidden flex-nowrap min-h-screen w-auto bg-black'>
+            <SideBar/>
+            <main className='w-full relative'>
               {children}
+              <Footer/>
             </main>
           </div>
         </AppContextProvider>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 import HamburguerIcon from '@/components/HamburguerIcon';
+import Navbtn from '@/components/Menu/Navbtn';
 import MenuButton from '@/components/MenuButton';
 import MenuIndicator from '@/components/MenuIndicator';
 import Paragraph from '@/components/Paragraph';
@@ -9,25 +10,27 @@ import TextContent from '@/components/TextContent';
 import { appContext } from '@/context/AppContext';
 import { useContext, useState } from 'react';
 
-
+import { SiApachekafka } from "react-icons/si";
 
 export default function Home() {
 
   return (
     <>
-      <MenuButton></MenuButton>
-      <section className='w-full mt-10'>
+      <MenuButton/>
+      <section className='w-full h-full'>
         <TextContent>
-          <h1 className='text-2xl font-bold text-center mb-5'> Bem-Vindo ao evento sobre Apache Kafka 🎉</h1>
+          <div className='mt-10 mb-8 text-zinc-200 text-2xl flex w-full gap-3 items-center justify-center'><h1 className='font-bold text-center'> Bem-Vindo ao evento sobre Apache Kafka </h1><SiApachekafka/></div>
           <Paragraph>
             O evento será dirigido por Pedro Pietro durante um evento na comunidade do Chorume no dia 21 de Novembro de 2023 no Discord. Para acompanhar e ter como
             referência futura, a equipe de moderadores e administradores do chorume estão disponibilizando esse material auxiliar. O material original pode ser encontrado clicando
             <a className='underline ml-1 text-yellow-500 cursor-pointer' href='https://data--flair-training.cdn.ampproject.org/c/s/data-flair.training/blogs/kafka-tutorials-home/' target='_blank'>aqui</a>.
           </Paragraph>
-          <Paragraph>
-            Todo o conteúdo é organizado no menu lateral e você pode acessá-los livremente. Contudo, caso você esteja entrando pela primeira vez ou esteja entrando enquanto o evento está acontecendo, recomendamos seguir
-            a sequência de links ou acompanhar o Pedro. Por fim, sinta-se livre para seguir o fluxo que lhe bem caber e ajudar no seu momento de estudos.
-          </Paragraph>
+          <div className='mt-4'>
+            <Paragraph>
+              Todo o conteúdo é organizado no menu lateral e você pode acessá-los livremente. Contudo, caso você esteja entrando pela primeira vez ou esteja entrando enquanto o evento está acontecendo, recomendamos seguir
+              a sequência de links ou acompanhar o Pedro. Por fim, sinta-se livre para seguir o fluxo que lhe bem caber e ajudar no seu momento de estudos.
+            </Paragraph>
+          </div>          
         </TextContent>
       </section>
     </>

diff --git a/components/ClassroomBar.tsx b/components/ClassroomBar.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import moment from 'moment';
 import classNames from 'classnames';
 import Classroom from "@/types/ServerClassroom";
-import Contributors from "@/types/ServerContributors";
+//import Contributors from "@/types/ServerContributors";
 import Contributor from "@/types/ServerContributor";
 import Author from '@/components/Author';
 import Link from 'next/link'
@@ -21,8 +21,7 @@ const ClassroomBar: React.FC<Classroom> = ({id, title,
     const [autor_prop, setAutor] = useState<Contributor[]>(authors || []);
     const dynamicBackgroundColor = getRandomColor();
 
-    const componentClasses = classNames(
-
+    const componentClasses = classNames(      
         'shadow-lg',
         'sha',
         'text-white',
@@ -47,16 +46,11 @@ const ClassroomBar: React.FC<Classroom> = ({id, title,
 
         <Link href={`/classroom/${title_prop}`} className={componentClasses} key={id_prop}>
           <header className='flex items-center gap-'>
-          <h1 className='text-xl'> <b>{title_prop}</b></h1>
-
-
+            <h1 className='text-xl'> <b>{title_prop}</b></h1> 
           </header>
 
         <section className='w-full  flex-1 flex flex-col'>
-
-
           <div className='text-sm'>
-
             <p className='whitespace-nowrap w-full text-ellipsis overflow-hidden py-5'>{description_prop}</p>
           </div>
 

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Footer() {
+  return (
+    <div className='text-white w-full h-20 flex items-center justify-center border-t-[1px] border-solid border-zinc-800'>
+      © 2023 Chorume da Bolha Tech. All Rights Reserved.
+    </div>
+  )
+}
diff --git a/components/Loading.tsx b/components/Loading.tsx
@@ -4,7 +4,7 @@ import { useContext, useState } from "react";
 export default function Loading() {
     const {loading} = useContext(appContext);
     return loading ? (
-        <section className="absolute z-50 w-full h-full bg-slate-900 flex justify-center items-center bg-opacity-90">
+        <section className="absolute z-50 w-full h-full bg-black flex justify-center items-center bg-opacity-90">
             <svg width="167" height="146" viewBox="0 0 167 146" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g filter="url(#filter0_d_7_2)">
                     <path d="M9.45483 134.25L83.5 6L157.545 134.25H9.45483Z" stroke="white" className="loadingIcon" strokeWidth="6" shapeRendering="crispEdges" />

diff --git a/components/MarkdownAdapters/BlockquoteAdapter.tsx b/components/MarkdownAdapters/BlockquoteAdapter.tsx
@@ -8,12 +8,13 @@ export default function BlockquoteAdapter({ element }: {
     const { children, ...rest } = element;
 
     return (
-        <blockquote className="bg-slate-700 flex align-middle p-4 rounded-lg mt-5" {...rest}>
-            <span>
-            <ExclamationIcon></ExclamationIcon>
-            </span>
-            <div className="ml-2 flex align-middle justify-center">
-            {children}
+        <blockquote className="bg-[#0A0A0A] p-4 align-middle rounded-lg mb-8" {...rest}>
+            <div>
+                <ExclamationIcon></ExclamationIcon>
             </div>
-            </blockquote>);
+            <div className="flex align-middle justify-center">
+                {children}
+            </div>
+        </blockquote>
+    );
 }
diff --git a/components/MarkdownAdapters/CodeAdapter.tsx b/components/MarkdownAdapters/CodeAdapter.tsx
@@ -4,5 +4,5 @@ import { ExtraProps } from "react-markdown";
 export default function CodeAdapter({element}: {
     element: ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps
 }) {
-    return <code className="bg-slate-800 inline p-1 text-center text-yellow-300 font-mono rounded" {...element}></code>
+    return <code className="bg-[#0A0A0A] px-1 inline text-center text-yellow-300 font-mono rounded" {...element}></code>
 }
diff --git a/components/MarkdownAdapters/HeadingThreeAdapter.tsx b/components/MarkdownAdapters/HeadingThreeAdapter.tsx
@@ -5,6 +5,6 @@ export default function HeadingThreeAdapter({ element }: {
     element: ClassAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLHeadingElement> & ExtraProps
 }) {
     return (
-        <h3 className="text-red-400 mt-2 mb-2" {...element}></h3>
+        <h3 className="text-red-400" {...element}></h3>
     );
 }
diff --git a/components/MarkdownAdapters/ParagraphAdapter.tsx b/components/MarkdownAdapters/ParagraphAdapter.tsx
@@ -5,6 +5,6 @@ export default function ParagraphAdapter({element}: {
     element: ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & ExtraProps
 }) {
    return (
-    <p className="font-normal" {...element}></p>
+    <p className="font-medium pt-4 mb-8" {...element}></p>
    );
 }
diff --git a/components/MarkdownAdapters/PreAdapter.tsx b/components/MarkdownAdapters/PreAdapter.tsx
@@ -22,5 +22,5 @@ export default function PreAdapter({ element }: {
         return () => window.removeEventListener('resize', handler);
     }, []);
 
-    return showCode ? <pre className="bg-slate-800 block p-2 text-red-200 rounded font-mono mt-5 mb-5 whitespace-pre-wrap" {...element}></pre> : null;
+    return showCode ? <pre className="bg-[#0A0A0A] p-4 block text-white rounded font-mono whitespace-pre-wrap" {...element}></pre> : null;
 }
diff --git a/components/MarkdownAdapters/StrongAdapter.tsx b/components/MarkdownAdapters/StrongAdapter.tsx
@@ -4,5 +4,5 @@ import { ExtraProps } from "react-markdown";
 export default function StrongAdapter({element}: {
     element: ClassAttributes<HTMLElement> & HTMLAttributes<HTMLParagraphElement> & ExtraProps
 }) {
-   return <strong className="text-red-400" {...element}></strong>
+   return <strong className="text-indigo-400" {...element}></strong>
 }
diff --git a/components/MarkdownAdapters/SubtitleAdapter.tsx b/components/MarkdownAdapters/SubtitleAdapter.tsx
@@ -5,6 +5,6 @@ export default function SubtitleAdapter({element}: {
     element: ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & ExtraProps
 }) {
     return (
-        <h2 className="text-xl font-bold m-5" {...element}></h2>
+        <h2 className="text-xl font-bold border-t-[1px] border-solid border-zinc-800 pt-8" {...element}></h2>
     );
 }
diff --git a/components/MenuButton.tsx b/components/MenuButton.tsx
@@ -1,17 +1,19 @@
-import { useContext } from "react";
-import HamburguerIcon from "./HamburguerIcon";
+import React, { useContext } from "react";
 import { appContext } from "@/context/AppContext";
+import HamburguerIcon from "./HamburguerIcon";
 
 export default function MenuButton() {
     const { openSideMenu, toggleSideMenu } = useContext(appContext);
-    const baseClass = 'absolute cursor-pointer w-8 h-8';
-    const appendClass = openSideMenu ? 'bg-slate-700 rounde' : '';
-    return (
-        <>
-            <span onClick={() => { toggleSideMenu(); }} className={`${baseClass} ${appendClass}`}>
-                <HamburguerIcon></HamburguerIcon>
-            </span>
-        </>
+    const baseClass = 'fixed z-50 cursor-pointer w-8 h-8 text-white mt-4 ml-2';
+    const buttonText = openSideMenu ? 'X' : <HamburguerIcon/>;
 
+    const handleMenuToggle = () => {
+        toggleSideMenu();
+    };
+
+    return (
+        <div onClick={handleMenuToggle} className={`${baseClass}`}>
+            {buttonText}
+        </div>
     );
-}
+}
diff --git a/components/Paragraph.tsx b/components/Paragraph.tsx
@@ -2,6 +2,6 @@ import { ReactNode } from "react";
 
 export default function Paragraph({children}: {children: ReactNode}) {
     return (
-        <p className='indent-4'>{children}</p>
+        <p className='indent-4 text-white'>{children}</p>
     );
 }
diff --git a/components/SideBar.tsx b/components/SideBar.tsx
@@ -6,19 +6,19 @@ import Link from "next/link";
 
 export default function SideBar() {
     const {openSideMenu, documents} = useContext(appContext);
-    const baseClasses = `p-2 min-w-[300px] bg-slate-700 text-white overflow-y-auto transition-all relative`
+    const baseClasses = `h-screen p-2 min-w-[300px] bg-black border-r-[1px] border-solid border-zinc-800 fixed z-30 text-white overflow-y-auto transition-all`
     const showClasses = openSideMenu ? 'ml-0':`ml-[-300px]`;
     const docs = documents.docs;
     return(
-      <aside className={`${baseClasses} ${showClasses}`}>
-        <h1 className="text-slate-300 text-2xl"><Link href={"/"}>Evento de Kafka</Link></h1>
+      <div className={`${baseClasses} ${showClasses}`}>
+        <div className="mt-2 font-semibold text-white text-xl flex justify-center items-center"><Link href={"/"}>Evento de Kafka</Link></div>
         <nav className='m-2'>
           <ul>
            {
              docs.map((doc, i) => <SideBarItem key={doc.token} token={doc.token} index={i}>{docs[i].title}</SideBarItem>)
            }        
           </ul>
         </nav>
-      </aside>
+      </div>
     );
 }
diff --git a/components/TextContent.tsx b/components/TextContent.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 
 export default function TextContent({children}: {children: ReactNode}) {
     return(
-        <section className="text-white max-w-[1200px] m-auto p-5 text-justify [&>p]:mt-4">
+        <section className="text-white max-w-[1200px] m-auto p-5 text-justify">
             {children}
         </section>
     );

diff --git a/docs/Top 5 Livros sobre Kafka.md b/docs/Top 5 Livros sobre Kafka.md
@@ -6,29 +6,29 @@ Além disso, o Kafka está sendo usado por inúmeras grandes empresas para diver
 
 Assim, vamos iniciar um tour para explorar os livros Apache Kafka
 
-## a) Kafka: The Definitive Guide
+## Kafka: The Definitive Guide
 ![Kafka: o guia definitivo](https://m.media-amazon.com/images/I/91L+4a9T-cL._AC_UF1000,1000_QL80_.jpg)
 O livro “Kafka: The Definitive Guide” foi escrito por engenheiros da Confluent e do LinkedIn responsáveis pelo desenvolvimento do Kafka.
 
 Eles explicam como implantar clusters Kafka de produção, escrever microsserviços confiáveis orientados a eventos e construir aplicativos escalonáveis de processamento de fluxo com esta plataforma. Ele também contém exemplos detalhados. Através disso, incluindo o protocolo de replicação, você aprenderá os princípios de design do Kafka, garantias de confiabilidade, APIs principais e detalhes da arquitetura, o controlador e a camada de armazenamento. No entanto, mesmo que você seja novo no Apache Kafka como arquiteto de aplicativos, desenvolvedor ou engenheiro de produção, este guia prático mostra como usar esta plataforma de streaming de código aberto para lidar com feeds de dados em tempo real.
-## b) Learning Apache Kafka
+## Learning Apache Kafka
 ![Aprendendo Apache Kafka](/assets/Learning-Apache-Kafka.webp)
 Se você quiser saber mais sobre o Apache Kafka de forma prática, este livro do Kafka será a escolha certa.
 Aqueles que têm experiência em desenvolvimento de software, mas não têm experiência anterior com Apache Kafka ou tecnologias semelhantes, podem ser o público-chave para isso. Além disso, Learning Apache Kafka é útil para desenvolvedores de aplicativos corporativos e entusiastas de big data que trabalharam com outros sistemas baseados em publisher-subscriber, mas ainda desejam explorar o Kafka como uma solução futurista. Além disso, você saberá como o Kafka é planejado internamente e quais especificações o tornam mais eficaz. Por último, você aprenderá como o Kafka funciona com outras tecnologias, como Hadoop, Storm e assim por diante.
 
-## c) Apache Kafka Cookbook
+## Apache Kafka Cookbook
 ![Livro de receitas Apache Kafka](/assets/Apache-kafka-Cookbook.jpg)
 
 Este é um dos melhores livros do Apache Kafka. Para qualquer idioma e tecnologia, os “livros de receitas” têm sido a principal escolha dos alunos. O mesmo se aplica aqui também. Para iniciantes no domínio do Kafka, “Apache Kafka Cookbook” é um dos principais livros do Apache Kafka. Este livro ensina como configurar e gerenciar rapidamente seu cluster Kafka junto com a lição para usar o cluster Apache Kafka e conectá-lo com ferramentas para processamento de big data. Além disso, podemos dizer que é um guia prático para monitorar a instalação do Apache Kafka.
 
-## d) Building Data Streaming Applications with Apache Kafka
+## Building Data Streaming Applications with Apache Kafka
 ![Building Data Streaming Applications with Apache Kafka](/assets/Building-Data-Streaming-Applications.webp)
 
 Embora Building Data Streaming Applications with Apache Kafka se trate de aprender como usar o Apache Kafka e as diferentes ferramentas do ecossistema Kafka da maneira mais fácil possível, este livro para Apache Kafka é a escolha certa para você. No entanto, para aproveitar ao máximo este livro, alguma experiência em programação com Java é necessária.
 
 Ele contém conhecimento para construir aplicativos eficientes de streaming em tempo real no Apache Kafka para processar fluxos de dados, juntamente com conhecimento para dominar as APIs principais do Kafka para configurar clusters Apache Kafka e começar a escrever produtores e consumidores de mensagens. Além disso, é um guia abrangente para ajudá-lo a obter uma compreensão sólida dos conceitos deste ecossistema, juntamente com exemplos práticos.
 
-## e) Streaming Architecture
+## Streaming Architecture
 ![Streaming Architecture](/assets/Streaming-Architecture.webp)
 
 Este livro para Kafka contém práticas recomendadas para projetar uma arquitetura confiável que dê suporte a esse paradigma emergente de big data. Com foco no upstream-queuing ou na camada de passagem de mensagens, os autores deste livro ajudam você a explorar algumas das melhores tecnologias para lidar com processamento e análise de fluxo. Este livro também inclui casos de uso específicos para ilustrar a eficácia dessas tecnologias.  

diff --git a/docs/Vantagens e Desvantagens do Kafka.md b/docs/Vantagens e Desvantagens do Kafka.md
@@ -43,6 +43,7 @@ Kafka pode também ser empregado para casos de uso com lotes e também desempenh
 Kafka pode lidar com pipelines de dados em tempo real. Essa característica é um dos principais motivos pelo qual essa tecnologia é escolhida.
 ## **Desvantagens**
 
+
 ### **a) Falta de Ferramentas de Monitoramento**
 
 É notória a ausência de um conjunto completo de ferramentas de gerenciamento e monitoramento. Por isso, equipes de suporte empresarial se sentem receosas ao escolher o Kafka a longo prazo.
@@ -64,8 +65,4 @@ As vezes, apresenta um comportamento desajeitado e lento, quando o número de co
 
 ### **g) Ausência de Paradigmas de Mensageria**
 
-Alguns dos paradigmas de mensageria estão faltando no Kafka como os de request/reply, consultas point-to-point, entre outros. Não sempre mas para certos casos de uso, isso se torna problemático. 
-
-
-
-
+Alguns dos paradigmas de mensageria estão faltando no Kafka como os de request/reply, consultas point-to-point, entre outros. Não sempre mas para certos casos de uso, isso se torna problemático. 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "next": "14.1.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^4.12.0",
     "react-markdown": "^9.0.0",
     "remark-gfm": "^4.0.0"
   },