pspspspspps

src/App.jsx

@@ -20,6 +20,7 @@ function App() {
             <Route path="/messages/:participantId" element={<Conversation />} />
           </Route>
         </Route>
+        <Route path="/community" element={<Community />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
         <Route path="*" element={<NotFound />} />

src/components/community/badge/index.jsx

@@ -13,6 +13,9 @@ function CommunityBadge() {
         <header className="names">
           <span className="displayName">Comunidade legal</span>
           <span className="username">@comunidade.legal</span>
+          <div className="follow">
+            <button>Participar</button>
+          </div>
         </header>
         <main className="description">
           <span>

src/components/community/banner/index.jsx

@@ -0,0 +1,70 @@
+import { useRef, useEffect } from "react";
+import "./style.css";
+
+function Banner({ community }) {
+
+    const popupRef = useRef(null);
+    const bannerImageRef = useRef(null);
+
+    useEffect(() => {
+      const bannerImage = bannerImageRef.current;
+      const popup = popupRef.current;
+
+      if (bannerImage && popup) {
+        // Evento para abrir o popup
+        bannerImage.onclick = () => {
+          popup.style.display = "block";
+          popup.querySelector("img").src = bannerImage.getAttribute("src");
+        };
+
+        // Evento para fechar o popup
+        popup.onclick = () => {
+          popup.style.display = "none";
+        };
+      }
+
+      // Cleanup
+      return () => {
+        if (bannerImage) bannerImage.onclick = null;
+        if (popup) popup.onclick = null;
+      };
+    }, []); // Executa apenas na montagem
+
+    return (
+        <div>
+          <div className="banner-head">
+            <div className="imgbox">
+                <img ref={bannerImageRef} src={community.banner} alt="banner" />
+            </div>
+
+            <div className="text-container">
+                    <h1 className="display-name">{community.displayname}</h1>
+                    <h2 className="name">{community.name}</h2> 
+            </div>
+
+            <div className="follow">
+            <button>Participar</button>
+            </div>
+
+          </div>
+
+          <div ref={popupRef} className="banner-popup">
+            <span>&times;</span>
+            <img alt="" />
+          </div>
+        </div>
+      );
+    }
+
+
+  Banner.defaultProps = {
+    community: {
+      banner: "https://images.unsplash.com/photo-1606663889134-b1dedb5ed8b7?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      displayname: "New Community",
+      name: "@new.community",
+      members: 0,
+    },
+  };
+
+  export default Banner;
+

src/components/community/banner/style.css

@@ -0,0 +1,105 @@
+.banner-head {
+    position: relative;        
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    width: 100%;
+    padding: 20px;
+    margin: 0px black;
+    gap: 15px;
+    background-color: white;
+}
+
+.display-name{
+    font-size: 1.8rem;
+    font-style: bold;
+    margin: 0;
+    text-align: left;
+
+}
+
+.text-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    justify-content: flex-end;
+    text-align: left;
+}
+
+
+.follow {
+    margin-left: auto;
+    margin-right: 3%;
+    align-self: flex-end;
+}
+
+.follow button {
+    color: #ffffff;
+    background-color: #5DADE2;
+    border-radius: 10px;
+    padding: 0.3rem;
+    border: none;
+    border-radius: 40px;
+    height: 3rem;
+    width: 130%;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: 0.3s;
+
+}
+
+.follow button:hover {
+    background-color: #2b88c6; /* Efeito ao passar o mouse */
+    transform: scale(1.02);
+    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
+}
+
+
+.imgbox {
+    object-fit: cover;
+    display: flex;
+}
+
+.imgbox img{
+    border: 1px solid #ddd;
+    border-radius: 1px;
+    padding: 2px;
+    float: left;
+    width:  130px;
+    height: 110px;
+    object-fit: cover;
+
+}
+
+.banner-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: hsla(0, 0%, 0%, 0.447);
+    height: 100%;
+    width: 100%;
+    z-index: 100;
+}
+
+.banner-popup span{
+    position: absolute;
+    top: 0;
+    right: 10px;
+    font-weight: bolder;
+    color: white;
+    cursor: pointer;
+    z-index: 100;
+}
+
+.banner-popup img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 5px;
+    border-radius: 5px;
+    padding: 100px;
+    width: 750px;
+    object-fit: cover;
+}

src/components/community/infobar/index.jsx

@@ -0,0 +1,41 @@
+import "./style.css";
+import { format } from 'date-fns';
+
+function Infobar({ community }) {
+  const formattedDate = format(new Date(community.creation), 'dd/MM/yyyy');
+
+  return (
+    <div className="infobar">
+
+      <div className="infobar-details">
+        <div className="flag-container">
+          <img src={community.flag} alt={`${community.nationality} flag`} className="flag-img" />
+          <p className="community-nationality">{community.nationality}</p>
+        </div>
+
+        <div className="text-info">
+          <p className="community-name">{community.name}</p>
+          <p className="community-creation">Created on: {formattedDate}</p>
+          <hr></hr>
+          <p className="community-description">{community.description}</p>
+          <hr></hr>
+          <p className="community-members">Members: {community.members}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+Infobar.defaultProps = {
+  community: {
+    nationality: "Brasil",
+    flag: "https://www.gov.br/planalto/pt-br/conheca-a-presidencia/acervo/simbolos-nacionais/bandeira/bandeiragrande.jpg/@@images/image",
+    banner: "https://images.unsplash.com/photo-1606663889134-b1dedb5ed8b7?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    displayname: "New Community",
+    name: "@new.community",
+    creation: new Date(),  // Defina a data aqui, sem formatação
+    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Error voluptatum natus eos accusamus ex incidunt soluta, alias ipsum molestias aut fugit eum asperiores non suscipit quis officiis a iste deserunt?",
+    members: 1,
+  },
+};
+
+export default Infobar;

src/components/community/infobar/style.css

@@ -0,0 +1,91 @@
+
+  /* Estilos do componente infobar */
+  .infobar {
+    display: flex;
+    align-items: flex-start; 
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    width: 100%; 
+    max-width: 600px; 
+    height: 100%;
+    min-height: 500px; 
+    margin: 20px auto;
+    overflow: hidden;
+    }
+
+
+  /* Contêiner de detalhes */
+  .infobar-details {
+    display: flex;
+    flex-direction: column; 
+    width: 100%;
+    gap: 20px; 
+    align-items: center; 
+  }
+
+
+  .flag-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 10px;
+    width: auto;
+    border-radius: 15px;
+    gap:5px;
+    background-color: #58d68d;
+    left: 10px;
+  }
+
+  .flag-img {
+    width: 20px; 
+    height: auto;
+  }
+
+  .community-nationality {
+    font-size: 12px;
+    margin-top: 10px;
+    color: rgb(0, 0, 0);  
+    margin: 0; 
+    line-height: 1.2; 
+    }
+
+  /* Informações de texto */
+  .text-info {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .community-name {
+    font-size: 20px; /* Título maior */
+    font-weight: bold;
+    color: #333;
+  }
+
+  .community-creation {
+    margin-top: 5px;
+    color: #888;
+    font-size: 15px;
+  }
+
+  hr {
+    margin: 15px 0;
+    border: none;
+    border-top: 1px solid #eee;
+    width: 80%; /* Reduz a largura da linha */
+  }
+
+  .community-description {
+    font-size: 15px;
+    color: #666;
+    line-height: 1.8; /* Espaçamento maior entre linhas */
+    padding: 0 10px; /* Adiciona espaçamento interno */
+  }
+
+  .community-members {
+    font-size: 18px;
+    font-weight: bold;
+    color: #444;
+  }
+

src/pages/community/index.jsx

@@ -0,0 +1,23 @@
+import Banner from "../../components/community/banner";
+import NavigationBar from "../../components/navbar";
+import Infobar from "../../components/community/infobar"
+import Feed from "../feed"
+import "./styles.css"; // Certifique-se de ter o arquivo CSS correto
+
+function Community() {
+    return (
+        <div className="container large">
+            <NavigationBar />
+            <div className="divider"></div>
+            <div>
+                <Banner />
+                <Feed />
+            </div>
+            <div className="divider"></div>
+            <Infobar />
+
+    </div>
+    );
+}
+
+export default Community;

src/pages/community/styles.css

@@ -0,0 +1,7 @@
+.banner-container {
+    width: 100%;
+    display: flex;
+    justify-content: center; /* Centraliza horizontalmente */
+    align-items: center; /* Centraliza verticalmente */
+    padding: 20px 0;
+  }