From b2e5aad4072419f4296720f25bbeda0781053998 Mon Sep 17 00:00:00 2001
From: Marino <megumimariana@gmail.com>
Date: Wed, 18 Dec 2024 08:59:52 -0300
Subject: [PATCH] add community page and components

---
 package-lock.json                          |  11 +++
 package.json                               |   1 +
 src/App.jsx                                |   2 +
 src/components/community/badge/index.jsx   |   3 +
 src/components/community/banner/index.jsx  |  70 ++++++++++++++
 src/components/community/banner/style.css  | 105 +++++++++++++++++++++
 src/components/community/infobar/index.jsx |  41 ++++++++
 src/components/community/infobar/style.css |  91 ++++++++++++++++++
 src/pages/community/index.jsx              |  23 +++++
 src/pages/community/styles.css             |   7 ++
 10 files changed, 354 insertions(+)
 create mode 100644 src/components/community/banner/index.jsx
 create mode 100644 src/components/community/banner/style.css
 create mode 100644 src/components/community/infobar/index.jsx
 create mode 100644 src/components/community/infobar/style.css
 create mode 100644 src/pages/community/index.jsx
 create mode 100644 src/pages/community/styles.css

diff --git a/package-lock.json b/package-lock.json
index 62f9c55..7f2a25b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "backpack-frontend": "file:",
+        "date-fns": "^4.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hot-toast": "^2.4.1",
@@ -1673,6 +1674,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
diff --git a/package.json b/package.json
index b793865..07420ec 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "backpack-frontend": "file:",
+    "date-fns": "^4.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
diff --git a/src/App.jsx b/src/App.jsx
index 0c6f274..f37249a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import Feed from "./pages/feed";
 import { Toaster } from "react-hot-toast";
 import ProtectedRoute from "./components/protect";
 import Conversations from "./pages/conversations";
+import Community from "./pages/community";
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
           <Route path="/" element={<Feed />} />
           <Route path="/conversations" element={<Conversations />} />
         </Route>
+        <Route path="/community" element={<Community />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
         <Route path="*" element={<NotFound />} />
diff --git a/src/components/community/badge/index.jsx b/src/components/community/badge/index.jsx
index a7d6166..f31b8cf 100644
--- a/src/components/community/badge/index.jsx
+++ b/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>
diff --git a/src/components/community/banner/index.jsx b/src/components/community/banner/index.jsx
new file mode 100644
index 0000000..4a0b81b
--- /dev/null
+++ b/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;
+  
\ No newline at end of file
diff --git a/src/components/community/banner/style.css b/src/components/community/banner/style.css
new file mode 100644
index 0000000..63d8f98
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/community/infobar/index.jsx b/src/components/community/infobar/index.jsx
new file mode 100644
index 0000000..62a9619
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/community/infobar/style.css b/src/components/community/infobar/style.css
new file mode 100644
index 0000000..45a99e6
--- /dev/null
+++ b/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;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/community/index.jsx b/src/pages/community/index.jsx
new file mode 100644
index 0000000..86eabc6
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/community/styles.css b/src/pages/community/styles.css
new file mode 100644
index 0000000..1500e72
--- /dev/null
+++ b/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;
+  }
\ No newline at end of file