card botón texto ver más + ajustes

ging · Jan 20, 2025 · eca78db · eca78db
1 parent b29592d
commit eca78db
Show file tree

Hide file tree

Showing 33 changed files with 806 additions and 221 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -6,6 +6,7 @@
  /* border: 1px solid salmon */
 }
 
+
 /*TYPE*/
 /* .text-h5 {
   color: inherit

diff --git a/app/projects/page.js b/app/projects/page.js
@@ -0,0 +1,172 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+// import TabsResearchLineFilter from "@/components/filters/TabsResearchLineFilter";
+import { projects } from "@/constants/projects";
+import { Card } from "@/components/core/Cards";
+// import { researchlines } from "@/constants/researchlines";
+import Heading from "@/components/ui/Heading";
+import Text from "@/components/ui/Text"
+// import ProjectsFilter from "@/components/filters/ProjectsFilter"
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState, useEffect } from "react";
+import { Suspense } from 'react';
+
+
+export default function Projects() {
+  return (
+    <Suspense>
+      <ProjectsPage />
+    </Suspense>
+  );
+
+}
+
+
+
+function ProjectsPage() {
+  const { t, i18n } = useTranslation();
+  const currentLang = i18n.language;
+
+  const router = useRouter(); // Hook para manipular la URL
+  let searchParams = useSearchParams(); 
+
+  const [researchLine, setResearchLine] = useState("all");
+  const [projectType, setProjectType] = useState(undefined);
+  const [search, setSearch] = useState("");
+
+  const pathname = "/projects";
+
+//   // creado array de categorías de publications 
+//   const projectTypes = ["all",...new Set(projects.map(project => project.projectType))];
+
+//   // 2. Agregar objeto "all", que sería "todas las líneas de inv."
+//   let researchLines = ["all", ...researchlines];
+
+//   //actualizar la URL cuando cambia algo en el estado, usamos router.push
+//   useEffect(() => {
+//     let query = {};
+//     if (search) query.search = search;
+//     if (projectType) query.category = projectType;
+//     if (researchLine) query.researchline = researchLine;
+
+//     router.push(`${pathname}/?${new URLSearchParams(query).toString()}`, undefined);
+//   }, [search, projectType, researchLine]);
+
+
+//   // función para obtener todos los parámetros de la URL
+//   useEffect(() => {
+//     let researchLineURL = searchParams.get('researchline');    
+//     console.log("researchLineURL: " + researchLineURL);
+//     setResearchLine(researchLineURL);
+
+//     let searchURL = searchParams.get('search');
+//     console.log("searchURL: " + searchURL);
+//     setSearch(searchURL);
+
+//     let projectTypeURL = searchParams.get('category');
+//     console.log("projectType: " + projectTypeURL);
+//     setProjectType(projectTypeURL);
+
+//   }, []);
+
+//   // Filtrar los proyectos por línea de investigación
+//   const filteredItems = projects.filter(
+
+//     (item) => 
+
+//       (!search ||
+//         search
+//           .toLowerCase()
+//           .replace(new RegExp(/\s/g), "")
+//           .replace(new RegExp(/[àáâãäå]/g), "a")
+//           .replace(new RegExp(/æ/g), "ae")
+//           .replace(new RegExp(/ç/g), "c")
+//           .replace(new RegExp(/[èéêë]/g), "e")
+//           .replace(new RegExp(/[ìíîï]/g), "i")
+//           .replace(new RegExp(/ñ/g), "n")
+//           .replace(new RegExp(/[òóôõö]/g), "o")
+//           .replace(new RegExp(/œ/g), "oe")
+//           .replace(new RegExp(/[ùúûü]/g), "u")
+//           .replace(new RegExp(/[ýÿ]/g), "y")
+//           .replace(new RegExp(/\W/g), "")
+//           .split(" ")
+//           .every((i) =>
+//             item.title
+//               .toLowerCase()
+//               .replace(new RegExp(/\s/g), "")
+//               .replace(new RegExp(/[àáâãäå]/g), "a")
+//               .replace(new RegExp(/æ/g), "ae")
+//               .replace(new RegExp(/ç/g), "c")
+//               .replace(new RegExp(/[èéêë]/g), "e")
+//               .replace(new RegExp(/[ìíîï]/g), "i")
+//               .replace(new RegExp(/ñ/g), "n")
+//               .replace(new RegExp(/[òóôõö]/g), "o")
+//               .replace(new RegExp(/œ/g), "oe")
+//               .replace(new RegExp(/[ùúûü]/g), "u")
+//               .replace(new RegExp(/[ýÿ]/g), "y")
+//               .replace(new RegExp(/\W/g), "")
+//               .includes(i)
+//           )) &&
+//       (!researchLine || (researchLine === "all" || item.researchLine.includes(researchLine))) &&
+//     (!projectType || (item.projectType && item.projectType === projectType))
+//   );
+//   console.log(filteredItems.map(filteredItem => filteredItem ));
+  return (
+      <div>
+        <div className="standard_margin" id="banner-publications">
+        <Heading level="h2">{t("projects.title")}</Heading>
+          <Text type="p">
+            {t("projects.description")}
+          </Text>
+          </div>
+      <div>
+
+        <div className="flex flex-col justify-center">
+        {/* <ProjectsFilter 
+          researchLines={researchLines} 
+          researchLine={researchLine}
+          projectType={projectType} 
+          projectTypes={projectTypes}
+          search={search}
+          changeProjectType={(projectType) => setProjectType(projectType)} 
+          changeResearchLine={(researchLine) => setResearchLine(researchLine)}
+          changeSearch={(search) => setSearch(search)} 
+          pathname={pathname}
+        /> */}
+
+        </div>
+        <div className="project_cards standard_margin my-4 sm:my-6 lg:my-10 sm:gap-4">
+          {projects.map(
+            (
+              {
+                year,
+                title,
+                description,
+                description_es,
+                researchLine,
+                logo,
+                route,
+                projectType
+              },
+              index
+            ) => (
+              <Card
+                key={index}
+                cardType={"project"}
+                year={year}
+                researchLine={researchLine}
+                title={title}
+                logo={logo}
+                route={route}
+                description_en={description}
+                description_es={description_es}
+                projectType={projectType}
+              ></Card>
+            )
+          )}
+        </div>
+      </div>
+      </div>
+  );
+}
diff --git a/app/research/page.js b/app/research/page.js
@@ -92,9 +92,9 @@ export default function Research() {
   return (
     <div className={"research page_" + currentLang}>
       <div className="standard_margin" id="banner-publications">
-        <Heading level="h2">{t("publications.title")}</Heading>
+        <Heading level="h2">{t("research.title")}</Heading>
         <Text type="p">
-          {t("publications.description")}
+          {t("research.description")}
         </Text>
       </div>
       <main className="research">
@@ -146,7 +146,7 @@ export default function Research() {
                 }) + " w-fit mt-4 my-auto"
               }
             >
-              {t("publications.button2")}
+              {t("research.button2")}
             </Button>
           )}
         </div>

diff --git a/app/tools/page.js b/app/tools/page.js
@@ -8,7 +8,11 @@ import image from "next/image";
 import { useState, useEffect } from "react";
 import { mytools } from "@/constants/tools";
 import { useTranslation } from "react-i18next";
-import FaceIcon from '@mui/icons-material/Face';
+import FaceIcon from "@mui/icons-material/Face";
+import { Card, CardVariants } from "@/components/core/Cards";
+import Heading from "@/components/ui/Heading";
+import Text from "@/components/ui/Text";
+
 
 export default function Tools(props) {
   const { t, i18n } = useTranslation();
@@ -24,15 +28,13 @@ export default function Tools(props) {
         title,
         translationKey,
         github,
-        gradient,
         key,
         description,
       }) => ({
         title,
         logo,
         route,
         github,
-        gradient,
         key,
         description: t(translationKey),
       })
@@ -47,60 +49,61 @@ export default function Tools(props) {
   return (
     <div className={"tools page_" + currentLang}>
       {/* <Header route="/tools" /> */}
-      <div className="banner px-4 sm:px-8 md:px-14 md:py-2 lg:px-24 lg:py-4 xl:px-28 xl:py-4 2xl:px-32 2xl:py-6">
-        <h1>{t("tools.title")}</h1>
+      <div className="standard_margin ">
+        <Heading level="h2">{t("tools.title")}</Heading>
+        <Text type="p" className="pb-8 xs:p-6 md:p-0">{t("tools.description")}</Text>
       </div>
       <main>
-        <section className="our_tools lg:mx-36 md:mx-14 sm:mx-8 mx-4 my-4 sm:my-4 md:my-8 lg:my-12 xl:my-16 2xl:my-20  xl:mx-44 2xl:mx-60">
-          <div className="tools_description text-slate-700 pb-8">
-            <p>{t("tools.desc")}</p>
-            <br />
-            <p>{t("tools.desc2")} </p>
-          </div>
-          <ResponsiveMasonry
-            columnsCountBreakPoints={{ 150: 1, 600: 2, 900: 3 }}
-          >
-            <Masonry gutter="12px">
-              {tools.map(
-                ({ title, description, route, logo, github, gradient }) => {
+        <section className="standard_margin">
+          <div className="grid sm:gap-4 gap-y-8 sm:grid-cols-2 md:grid-cols-3 ">
+              {tools.map( 
+                ({ key, title, description, route, logo, github}) => {
                   return (
-                    <div className="tool" key={title}>
-                      <div className={`tool_logo ${gradient}`}>
-                        <img alt={"Project Logo"} src={logo} />
-                      </div>
+                    <Card
+                      key={key}
+                      title={title}
+                      currentLang={currentLang}
+                      cardType={"tool"}
+                      className={CardVariants({variant: "tool"})}
+                      description={description}
+                      route={route}
+                    ></Card>
+                    //   <div className="tool" key={title}>
+                    //     <div className={`tool_logo ${gradient}`}>
+                    //       <img alt={"Project Logo"} src={logo} />
+                    //     </div>
 
-                      <div className="tool_content">
-                        <div className="tool_title">
-                          <h3>{title}</h3>
-                        </div>
-                        <div className="tool_description">
-                          <p>{description}</p>
-                        </div>
-                        <div className="tool_button_container">
-                          <button className="tool_button">
-                            <CreateLink route={route}>
-                              <FaceIcon />
-                              <span> {t("tools.toolCards.button")}</span>
-                            </CreateLink>
-                          </button>
-                          <button className="tool_github">
-                            <CreateLink route={github}>
-                              {/* <FontAwesomeIcon
-                                className="mr-2 "
-                                icon={faGithub}
-                                size="lg"
-                              /> */}
-                              <span> Github </span>{" "}
-                            </CreateLink>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
+                    //     <div className="tool_content">
+                    //       <div className="tool_title">
+                    //         <h3>{title}</h3>
+                    //       </div>
+                    //       <div className="tool_description">
+                    //         <p>{description}</p>
+                    //       </div>
+                    //       <div className="tool_button_container">
+                    //         <button className="tool_button">
+                    //           <CreateLink route={route}>
+                    //             <FaceIcon />
+                    //             <span> {t("tools.toolCards.button")}</span>
+                    //           </CreateLink>
+                    //         </button>
+                    //         <button className="tool_github">
+                    //           <CreateLink route={github}>
+                    //             {/* <FontAwesomeIcon
+                    //               className="mr-2 "
+                    //               icon={faGithub}
+                    //               size="lg"
+                    //             /> */}
+                    //             <span> Github </span>{" "}
+                    //           </CreateLink>
+                    //         </button>
+                    //       </div>
+                    //     </div>
+                    //   </div>
                   );
                 }
               )}
-            </Masonry>
-          </ResponsiveMasonry>
+            </div>
         </section>
       </main>
     </div>
@@ -116,3 +119,9 @@ const CreateLink = (props) => {
     <Link to={props.route}>{props.children}</Link>
   );
 };
+
+{
+  /* <CreateLink route={github}>
+  <span> Github </span>{" "}
+</CreateLink> */
+}
diff --git a/components/FilterCategory.jsx b/components/FilterCategory.jsx
@@ -16,7 +16,7 @@ export default function FilterCategory( {category, changeCategory, categories }
   const { t } = useTranslation();
   return (
     <div className="container_select_label w-1/2 lg:w-full">
-    <Label htmlFor="search">{t("publications.filter.fieldTitle2")}</Label>
+    <Label htmlFor="search">{t("research.filter.fieldTitle2")}</Label>
           <Select
             className="filter flex flex-col"
             onValueChange={(value) =>
@@ -35,7 +35,7 @@ export default function FilterCategory( {category, changeCategory, categories }
             <SelectContent id="publication" name="publication">
               {categories.map((category, index) => (
               <SelectItem key={index} value={category}>
-                {t(`publications.filter.fieldOpt${index + 1}`)}
+                {t(`research.filter.fieldOpt${index + 1}`)}
               </SelectItem>
               ))}
             </SelectContent>

diff --git a/components/FilterDate.jsx b/components/FilterDate.jsx
@@ -30,7 +30,7 @@ export default function FilterDate( {year, changeYear, items} ) {
 
   return (
     <div className="container_select_label w-1/2 lg:w-full">
-    <Label htmlFor="year">{t("publications.filter.fieldTitle3")}</Label>
+    <Label htmlFor="year">{t("research.filter.fieldTitle3")}</Label>
     <Select
       className="filter"
       id="filter_year"
@@ -49,7 +49,7 @@ export default function FilterDate( {year, changeYear, items} ) {
       </SelectTrigger>
       <SelectContent id="year" name="year">
         <SelectItem key={"all"} value={"all"}>
-          {t("publications.filter.fieldOpt5")}
+          {t("research.filter.fieldOpt5")}
         </SelectItem>
         {years.map((y) => (
           <SelectItem key={y} value={y}>

diff --git a/components/FilterText.jsx b/components/FilterText.jsx
@@ -11,7 +11,7 @@ export default function FilterText( {search, changeSearch} ) {
   const { t } = useTranslation();
   return (
     <div className="filter flex flex-wrap md:w-1/2">
-    <Label htmlFor="search">{t("publications.filter.fieldTitle1")}</Label>
+    <Label htmlFor="search">{t("research.filter.fieldTitle1")}</Label>
     <Input
       className="w-full"
       key={" "}