Skip to content

Commit eca78db

Browse files
lauraloglauralog
committed
card botón texto ver más + ajustes
1 parent b29592d commit eca78db

33 files changed

+806
-221
lines changed

‎app/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
/* border: 1px solid salmon */
77
}
88

9+
910
/*TYPE*/
1011
/* .text-h5 {
1112
color: inherit

‎app/projects/page.js‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
"use client";
2+
3+
import { useTranslation } from "react-i18next";
4+
// import TabsResearchLineFilter from "@/components/filters/TabsResearchLineFilter";
5+
import { projects } from "@/constants/projects";
6+
import { Card } from "@/components/core/Cards";
7+
// import { researchlines } from "@/constants/researchlines";
8+
import Heading from "@/components/ui/Heading";
9+
import Text from "@/components/ui/Text"
10+
// import ProjectsFilter from "@/components/filters/ProjectsFilter"
11+
import { useRouter, useSearchParams } from "next/navigation";
12+
import { useState, useEffect } from "react";
13+
import { Suspense } from 'react';
14+
15+
16+
export default function Projects() {
17+
return (
18+
<Suspense>
19+
<ProjectsPage />
20+
</Suspense>
21+
);
22+
23+
}
24+
25+
26+
27+
function ProjectsPage() {
28+
const { t, i18n } = useTranslation();
29+
const currentLang = i18n.language;
30+
31+
const router = useRouter(); // Hook para manipular la URL
32+
let searchParams = useSearchParams();
33+
34+
const [researchLine, setResearchLine] = useState("all");
35+
const [projectType, setProjectType] = useState(undefined);
36+
const [search, setSearch] = useState("");
37+
38+
const pathname = "/projects";
39+
40+
// // creado array de categorías de publications
41+
// const projectTypes = ["all",...new Set(projects.map(project => project.projectType))];
42+
43+
// // 2. Agregar objeto "all", que sería "todas las líneas de inv."
44+
// let researchLines = ["all", ...researchlines];
45+
46+
// //actualizar la URL cuando cambia algo en el estado, usamos router.push
47+
// useEffect(() => {
48+
// let query = {};
49+
// if (search) query.search = search;
50+
// if (projectType) query.category = projectType;
51+
// if (researchLine) query.researchline = researchLine;
52+
53+
// router.push(`${pathname}/?${new URLSearchParams(query).toString()}`, undefined);
54+
// }, [search, projectType, researchLine]);
55+
56+
57+
// // función para obtener todos los parámetros de la URL
58+
// useEffect(() => {
59+
// let researchLineURL = searchParams.get('researchline');
60+
// console.log("researchLineURL: " + researchLineURL);
61+
// setResearchLine(researchLineURL);
62+
63+
// let searchURL = searchParams.get('search');
64+
// console.log("searchURL: " + searchURL);
65+
// setSearch(searchURL);
66+
67+
// let projectTypeURL = searchParams.get('category');
68+
// console.log("projectType: " + projectTypeURL);
69+
// setProjectType(projectTypeURL);
70+
71+
// }, []);
72+
73+
// // Filtrar los proyectos por línea de investigación
74+
// const filteredItems = projects.filter(
75+
76+
// (item) =>
77+
78+
// (!search ||
79+
// search
80+
// .toLowerCase()
81+
// .replace(new RegExp(/\s/g), "")
82+
// .replace(new RegExp(/[àáâãäå]/g), "a")
83+
// .replace(new RegExp(/æ/g), "ae")
84+
// .replace(new RegExp(/ç/g), "c")
85+
// .replace(new RegExp(/[èéêë]/g), "e")
86+
// .replace(new RegExp(/[ìíîï]/g), "i")
87+
// .replace(new RegExp(/ñ/g), "n")
88+
// .replace(new RegExp(/[òóôõö]/g), "o")
89+
// .replace(new RegExp(/œ/g), "oe")
90+
// .replace(new RegExp(/[ùúûü]/g), "u")
91+
// .replace(new RegExp(/[ýÿ]/g), "y")
92+
// .replace(new RegExp(/\W/g), "")
93+
// .split(" ")
94+
// .every((i) =>
95+
// item.title
96+
// .toLowerCase()
97+
// .replace(new RegExp(/\s/g), "")
98+
// .replace(new RegExp(/[àáâãäå]/g), "a")
99+
// .replace(new RegExp(/æ/g), "ae")
100+
// .replace(new RegExp(/ç/g), "c")
101+
// .replace(new RegExp(/[èéêë]/g), "e")
102+
// .replace(new RegExp(/[ìíîï]/g), "i")
103+
// .replace(new RegExp(/ñ/g), "n")
104+
// .replace(new RegExp(/[òóôõö]/g), "o")
105+
// .replace(new RegExp(/œ/g), "oe")
106+
// .replace(new RegExp(/[ùúûü]/g), "u")
107+
// .replace(new RegExp(/[ýÿ]/g), "y")
108+
// .replace(new RegExp(/\W/g), "")
109+
// .includes(i)
110+
// )) &&
111+
// (!researchLine || (researchLine === "all" || item.researchLine.includes(researchLine))) &&
112+
// (!projectType || (item.projectType && item.projectType === projectType))
113+
// );
114+
// console.log(filteredItems.map(filteredItem => filteredItem ));
115+
return (
116+
<div>
117+
<div className="standard_margin" id="banner-publications">
118+
<Heading level="h2">{t("projects.title")}</Heading>
119+
<Text type="p">
120+
{t("projects.description")}
121+
</Text>
122+
</div>
123+
<div>
124+
125+
<div className="flex flex-col justify-center">
126+
{/* <ProjectsFilter
127+
researchLines={researchLines}
128+
researchLine={researchLine}
129+
projectType={projectType}
130+
projectTypes={projectTypes}
131+
search={search}
132+
changeProjectType={(projectType) => setProjectType(projectType)}
133+
changeResearchLine={(researchLine) => setResearchLine(researchLine)}
134+
changeSearch={(search) => setSearch(search)}
135+
pathname={pathname}
136+
/> */}
137+
138+
</div>
139+
<div className="project_cards standard_margin my-4 sm:my-6 lg:my-10 sm:gap-4">
140+
{projects.map(
141+
(
142+
{
143+
year,
144+
title,
145+
description,
146+
description_es,
147+
researchLine,
148+
logo,
149+
route,
150+
projectType
151+
},
152+
index
153+
) => (
154+
<Card
155+
key={index}
156+
cardType={"project"}
157+
year={year}
158+
researchLine={researchLine}
159+
title={title}
160+
logo={logo}
161+
route={route}
162+
description_en={description}
163+
description_es={description_es}
164+
projectType={projectType}
165+
></Card>
166+
)
167+
)}
168+
</div>
169+
</div>
170+
</div>
171+
);
172+
}

‎app/research/page.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,9 @@ export default function Research() {
9292
return (
9393
<div className={"research page_" + currentLang}>
9494
<div className="standard_margin" id="banner-publications">
95-
<Heading level="h2">{t("publications.title")}</Heading>
95+
<Heading level="h2">{t("research.title")}</Heading>
9696
<Text type="p">
97-
{t("publications.description")}
97+
{t("research.description")}
9898
</Text>
9999
</div>
100100
<main className="research">
@@ -146,7 +146,7 @@ export default function Research() {
146146
}) + " w-fit mt-4 my-auto"
147147
}
148148
>
149-
{t("publications.button2")}
149+
{t("research.button2")}
150150
</Button>
151151
)}
152152
</div>

‎app/tools/page.js‎

Lines changed: 59 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import image from "next/image";
88
import { useState, useEffect } from "react";
99
import { mytools } from "@/constants/tools";
1010
import { useTranslation } from "react-i18next";
11-
import FaceIcon from '@mui/icons-material/Face';
11+
import FaceIcon from "@mui/icons-material/Face";
12+
import { Card, CardVariants } from "@/components/core/Cards";
13+
import Heading from "@/components/ui/Heading";
14+
import Text from "@/components/ui/Text";
15+
1216

1317
export default function Tools(props) {
1418
const { t, i18n } = useTranslation();
@@ -24,15 +28,13 @@ export default function Tools(props) {
2428
title,
2529
translationKey,
2630
github,
27-
gradient,
2831
key,
2932
description,
3033
}) => ({
3134
title,
3235
logo,
3336
route,
3437
github,
35-
gradient,
3638
key,
3739
description: t(translationKey),
3840
})
@@ -47,60 +49,61 @@ export default function Tools(props) {
4749
return (
4850
<div className={"tools page_" + currentLang}>
4951
{/* <Header route="/tools" /> */}
50-
<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">
51-
<h1>{t("tools.title")}</h1>
52+
<div className="standard_margin ">
53+
<Heading level="h2">{t("tools.title")}</Heading>
54+
<Text type="p" className="pb-8 xs:p-6 md:p-0">{t("tools.description")}</Text>
5255
</div>
5356
<main>
54-
<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">
55-
<div className="tools_description text-slate-700 pb-8">
56-
<p>{t("tools.desc")}</p>
57-
<br />
58-
<p>{t("tools.desc2")} </p>
59-
</div>
60-
<ResponsiveMasonry
61-
columnsCountBreakPoints={{ 150: 1, 600: 2, 900: 3 }}
62-
>
63-
<Masonry gutter="12px">
64-
{tools.map(
65-
({ title, description, route, logo, github, gradient }) => {
57+
<section className="standard_margin">
58+
<div className="grid sm:gap-4 gap-y-8 sm:grid-cols-2 md:grid-cols-3 ">
59+
{tools.map(
60+
({ key, title, description, route, logo, github}) => {
6661
return (
67-
<div className="tool" key={title}>
68-
<div className={`tool_logo ${gradient}`}>
69-
<img alt={"Project Logo"} src={logo} />
70-
</div>
62+
<Card
63+
key={key}
64+
title={title}
65+
currentLang={currentLang}
66+
cardType={"tool"}
67+
className={CardVariants({variant: "tool"})}
68+
description={description}
69+
route={route}
70+
></Card>
71+
// <div className="tool" key={title}>
72+
// <div className={`tool_logo ${gradient}`}>
73+
// <img alt={"Project Logo"} src={logo} />
74+
// </div>
7175

72-
<div className="tool_content">
73-
<div className="tool_title">
74-
<h3>{title}</h3>
75-
</div>
76-
<div className="tool_description">
77-
<p>{description}</p>
78-
</div>
79-
<div className="tool_button_container">
80-
<button className="tool_button">
81-
<CreateLink route={route}>
82-
<FaceIcon />
83-
<span> {t("tools.toolCards.button")}</span>
84-
</CreateLink>
85-
</button>
86-
<button className="tool_github">
87-
<CreateLink route={github}>
88-
{/* <FontAwesomeIcon
89-
className="mr-2 "
90-
icon={faGithub}
91-
size="lg"
92-
/> */}
93-
<span> Github </span>{" "}
94-
</CreateLink>
95-
</button>
96-
</div>
97-
</div>
98-
</div>
76+
// <div className="tool_content">
77+
// <div className="tool_title">
78+
// <h3>{title}</h3>
79+
// </div>
80+
// <div className="tool_description">
81+
// <p>{description}</p>
82+
// </div>
83+
// <div className="tool_button_container">
84+
// <button className="tool_button">
85+
// <CreateLink route={route}>
86+
// <FaceIcon />
87+
// <span> {t("tools.toolCards.button")}</span>
88+
// </CreateLink>
89+
// </button>
90+
// <button className="tool_github">
91+
// <CreateLink route={github}>
92+
// {/* <FontAwesomeIcon
93+
// className="mr-2 "
94+
// icon={faGithub}
95+
// size="lg"
96+
// /> */}
97+
// <span> Github </span>{" "}
98+
// </CreateLink>
99+
// </button>
100+
// </div>
101+
// </div>
102+
// </div>
99103
);
100104
}
101105
)}
102-
</Masonry>
103-
</ResponsiveMasonry>
106+
</div>
104107
</section>
105108
</main>
106109
</div>
@@ -116,3 +119,9 @@ const CreateLink = (props) => {
116119
<Link to={props.route}>{props.children}</Link>
117120
);
118121
};
122+
123+
{
124+
/* <CreateLink route={github}>
125+
<span> Github </span>{" "}
126+
</CreateLink> */
127+
}

‎components/FilterCategory.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function FilterCategory( {category, changeCategory, categories }
1616
const { t } = useTranslation();
1717
return (
1818
<div className="container_select_label w-1/2 lg:w-full">
19-
<Label htmlFor="search">{t("publications.filter.fieldTitle2")}</Label>
19+
<Label htmlFor="search">{t("research.filter.fieldTitle2")}</Label>
2020
<Select
2121
className="filter flex flex-col"
2222
onValueChange={(value) =>
@@ -35,7 +35,7 @@ export default function FilterCategory( {category, changeCategory, categories }
3535
<SelectContent id="publication" name="publication">
3636
{categories.map((category, index) => (
3737
<SelectItem key={index} value={category}>
38-
{t(`publications.filter.fieldOpt${index + 1}`)}
38+
{t(`research.filter.fieldOpt${index + 1}`)}
3939
</SelectItem>
4040
))}
4141
</SelectContent>

‎components/FilterDate.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function FilterDate( {year, changeYear, items} ) {
3030

3131
return (
3232
<div className="container_select_label w-1/2 lg:w-full">
33-
<Label htmlFor="year">{t("publications.filter.fieldTitle3")}</Label>
33+
<Label htmlFor="year">{t("research.filter.fieldTitle3")}</Label>
3434
<Select
3535
className="filter"
3636
id="filter_year"
@@ -49,7 +49,7 @@ export default function FilterDate( {year, changeYear, items} ) {
4949
</SelectTrigger>
5050
<SelectContent id="year" name="year">
5151
<SelectItem key={"all"} value={"all"}>
52-
{t("publications.filter.fieldOpt5")}
52+
{t("research.filter.fieldOpt5")}
5353
</SelectItem>
5454
{years.map((y) => (
5555
<SelectItem key={y} value={y}>

‎components/FilterText.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function FilterText( {search, changeSearch} ) {
1111
const { t } = useTranslation();
1212
return (
1313
<div className="filter flex flex-wrap md:w-1/2">
14-
<Label htmlFor="search">{t("publications.filter.fieldTitle1")}</Label>
14+
<Label htmlFor="search">{t("research.filter.fieldTitle1")}</Label>
1515
<Input
1616
className="w-full"
1717
key={" "}

0 commit comments

Comments
 (0)