add cards multiples to home

DemocraciaEnRed · Apr 22, 2024 · 85bdf5b · 85bdf5b
1 parent fe19a75
commit 85bdf5b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 15 deletions.
diff --git a/src/app/page.jsx b/src/app/page.jsx
@@ -7,6 +7,7 @@ import BannerResurgente from "@/components/home/banner-resurgente";
 import BannerSobreProyecto from "@/components/home/banner-sobre-proyecto";
 import BannerTitle from "@/components/common/banner-title";
 import Skeleton from "@/components/common/skeleton";
+import BannerProjectCards from "@/components/home/banner-project-cards";
 
 
 export default async function Home() {
@@ -23,7 +24,7 @@ export default async function Home() {
             <Banner />
             <BannerResurgente />
             <Suspense fallback={<Skeleton height={500} />}>
-                <BannerPacto />
+                <BannerProjectCards />
             </Suspense>
             <BannerSobreProyecto />
         </div>

diff --git a/src/components/home/banner-pacto.jsx b/src/components/home/banner-pacto.jsx
@@ -6,9 +6,7 @@ import { fetchProjectId } from "@/utils/get-data"
 import StageProject from "../common/stage-project"
 import { PROJECT_ID } from "@/utils/constants"
 
-const BannerPacto = async () => {
-    const project = await fetchProjectId(PROJECT_ID)
-
+const BannerPacto = async ({project}) => {
 
     if (!project) return (<div className='banner-pacto is-flex is-justify-content-center is-align-items-center is-flex-direction-column py-6 ' id="banner-pacto">
         <div className="card has-background-cream is-flex has-text-centered card-project">
@@ -27,9 +25,9 @@ const BannerPacto = async () => {
         </div>
     </div>)
 
-    return (<div className='banner-pacto is-flex is-justify-content-center is-align-items-center is-flex-direction-column py-6 ' id="banner-pacto">
-        <h1 className="has-text-color-white has-text-centered is-size-2 is-size-4-touch has-text-weight-bold my-3">El pacto</h1>
-        {project && <a href={`/pacto/${PROJECT_ID}/`} className=" card-project">
+    return (<div className='banner-pacto is-flex is-justify-content-start is-align-items-center is-flex-direction-column py-6 m-3 ' id="banner-pacto">
+        <h1 className="has-text-color-white has-text-centered is-size-2 is-size-4-touch has-text-weight-bold my-3">{project.slug}</h1>
+        <a href={`/pacto/${PROJECT_ID}/`} className=" card-project">
             <div className="card has-background-cream is-flex ">
                 <div className="card-image" style={{ backgroundImage: `url('${project.coverUrl}')` }}>
 
@@ -59,7 +57,7 @@ const BannerPacto = async () => {
                 </div>
             </div>
         </a>
-        }
+
 
     </div>)
 }

diff --git a/src/components/home/banner-project-cards.jsx b/src/components/home/banner-project-cards.jsx
@@ -0,0 +1,25 @@
+import ArticlesCommentsCounter from "../common/article-comment-counter"
+import ClosingDate from "../common/closing-date"
+import ProgressBar from "../common/progresBar"
+import MkdFormatter from "../common/mkd-formatter"
+import { fetchProjects } from "@/utils/get-data"
+import StageProject from "../common/stage-project"
+import { PROJECT_ID } from "@/utils/constants"
+import BannerPacto from "./banner-pacto"
+
+const BannerProjectCards = async () => {
+    const {projects} = await fetchProjects()
+
+
+    return(
+        <div className="is-flex is-flex-wrap-wrap">
+            {projects && projects.map(project=>
+
+            <BannerPacto project={project} key={project.id}/>
+            )}
+
+        </div>
+    )
+}
+
+export default BannerProjectCards
diff --git a/src/static/scss/home.scss b/src/static/scss/home.scss
@@ -194,21 +194,22 @@
     .banner-re-surgente {
         display: flex;
         flex-wrap: wrap;
-
+            
         .banner-image {
-            width: 50%;
-            background-image: url('/images/latin-america-map.jpeg');
-            background-size: cover;
-            background-position: center;
-
+            width: 30%;
+            video{
+                height: 410px;
+                width: 100%;
+            }
             @include tablet {
                 width: 100%;
                 height: 50vh;
             }
+
         }
 
         .content {
-            width: 50%;
+            width: 70%;
             padding: 4rem 2rem;
             color: $white;
             margin-bottom: 0;

diff --git a/src/utils/get-data.js b/src/utils/get-data.js
@@ -5,6 +5,17 @@ import axiosServices from "./axios"
 
 /* PROJECT DATA */
 
+export const fetchProjects = async () => {
+    try {
+        let url = `/projects`
+        const resp = await axiosServices.get(url)
+        const project = await resp.data
+        return project
+    } catch (err) {
+        console.error(err);
+    }
+}
+
 export const fetchProjectId = async (projectId, version) => {
     try {
         let url = `/projects/${projectId}`