-
+
{" "}
- {t("publications.filter.text")}
+ {t("research.filter.text")}
{results} {" "}
diff --git a/components/core/Cards.jsx b/components/core/Cards.jsx
index 9f96795..d62f3b4 100644
--- a/components/core/Cards.jsx
+++ b/components/core/Cards.jsx
@@ -7,11 +7,15 @@ import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils";
+
import Heading from "../ui/Heading";
import { Badge, badgeVariants } from "../ui/badge";
import Text from "../ui/Text";
-import { Button } from "../ui/button";
+import { Button, ButtonVariants } from "../ui/button";
import Image from "../ui/image";
+import { Divider } from "../ui/divider";
+// import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
+// } from "@/components/ui/tooltip";
import {
CustomCard,
CardBody,
@@ -24,16 +28,21 @@ import {
} from "@/components/ui/customCard";
import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
import {
FaceIcon,
ArrowRightIcon,
- ExternalLinkIcon,
} from "@radix-ui/react-icons";
+
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import MailOutlinedIcon from "@mui/icons-material/MailOutlined";
+import ArticleIcon from '@mui/icons-material/Article';
import Link from "next/link";
const CardVariants = cva(
- "border border-primary min-w-20 p-4 inline-flex flex-col gap-4 items-center whitespace-nowrap rounded-md font-body text-sm text-text drop-shadow-md hover:scale-[101%] transition-all overflow-hidden",
+ "border border-primary min-w-20 p-4 sm:py-4 inline-flex flex-col gap-4 items-center whitespace-nowrap rounded-md font-body text-sm text-text drop-shadow-md hover:scale-[101%] transition-all overflow-hidden",
{
variants: {
direction: {
@@ -47,56 +56,69 @@ const CardVariants = cva(
}
);
-const tagContainerClasses = cn(
- "mt-6 w-full flex flex-wrap gap-2 justify-start"
-);
+const returnPwidth = () => {
+ const minWidth = 600; // Ancho mínimo
+ const maxWidth = 1600; // Ancho máximo
+ const minValue = 2.1; // Valor mínimo (para 1600px y más)
+ const maxValue = 2.4; // Valor máximo (para 600px)
-const renderTags = (tags) => {
- if (!tags) return null;
- const tagsArray = tags.split(",").map((tag) => tag.trim()); // Convierte el string en array y elimina espacios
- return tagsArray.map((tag, index) => (
-
- {tag}
- // Añade una key a cada Label
- ));
+ const width = window.innerWidth;
+
+ if (width <= minWidth) {
+ return maxValue; // Si el ancho es <= 600, devuelve 2.4
+ } else if (width >= maxWidth) {
+ return minValue; // Si el ancho es >= 1600, devuelve 1.8
+ } else {
+ // Cálculo lineal entre 600 y 1600
+ const ratio = (width - minWidth) / (maxWidth - minWidth);
+ return maxValue - ratio * (maxValue - minValue);
+ }
};
-// quitarle guión, añadir espaciado, mayúscula (Formateo)
-const renderCategory = (category) => {
- if (!category) return null;
- const categoryFormat = category
- .split("-") // cadena en un array de palabras
- .map((palabra) => palabra.charAt(0).toUpperCase() + palabra.slice(1)) // la primera letra en mayúscula
- .join(" "); // unir las palabras con espacio
- return (
-
- {categoryFormat}
-
- );
+// VER MAS
+const getIdealLength = () => {
+ const isMobile = window.innerWidth <= 600;
+
+ if (isMobile) {
+ return (window.innerWidth) * 4;
+ } else {
+ return ((window.innerWidth / returnPwidth()) - 150) * 4;
+ }
};
-const translateCategory = (category, currentLang) => {
- if (currentLang == "es") {
- if (category == "article-journal") {
- category = "artículo-revista";
- console.log(category);
- } else if (category == "paper-conference") {
- category = "acta-congreso";
- console.log(category);
- } else if (category == "book") {
- category = "libro";
- console.log(category);
- } else if (category == "chapter") {
- category = "capítulo";
- console.log(category);
- }
- } else if (currentLang == "en") {
- // transformar "artículo-revista" en article journal
+const calculateTextWidth = (description) => {
+ if (typeof document === "undefined") {
+ throw new Error("This function needs to run in a browser environment.");
+ }
+
+ const canvas = document.createElement("canvas");
+ const context = canvas.getContext("2d");
+ context.font = "16px sans-serif";
+
+ const characters = [...description];
+
+ let totalWidth = 0;
+ for (const letter of characters) {
+ const letterWidth = context.measureText(letter).width;
+ totalWidth += letterWidth;
}
- return renderCategory(category);
+ return totalWidth;
+};
+const isDescriptionLongEnough = (description) => {
+ return calculateTextWidth(description) >= getIdealLength();
};
+const deleteSpaces = (string) => {
+ let cleanStr = ''
+ for (const char of [...string]) {
+ if (char != ' ') {
+ cleanStr += char;
+ }
+ }
+ return cleanStr
+}
+
const Card = React.forwardRef(
(
{
@@ -106,6 +128,8 @@ const Card = React.forwardRef(
title,
subtitle,
description,
+ description_en,
+ description_es,
img,
svg,
tags,
@@ -122,38 +146,81 @@ const Card = React.forwardRef(
buttonText,
cardType,
role,
- currentLang,
- basePath,
+ researchLine,
+ logo,
+ projectType = "european-project",
+ keywords,
+ researchgate,
+ orcid,
+ webOfScience,
+ googleScholar,
+ linkedin,
+ portalUpm
},
ref
) => {
- const { t } = useTranslation();
+ const { t, i18n } = useTranslation();
+ const currentLang = i18n.language;
+
+ // PARA PROJECTCARD / teamcard
+ // Manejo de estado para ver si se ha expandido el "ver más" del texto
+ const [isExpanded, setIsExpanded] = useState(false);
+ const toggleDescription = () => {
+ setIsExpanded((prevState) => !prevState); // Alterna entre true y false,
+ };
+
+ //elegir description o description_es según el currentLang
+ let description_translation = description_en;
+ if (currentLang == "es" && description_es) {
+ description_translation = description_es;
+ }
+
+ // fondo researchline cards - project cards
+ let backgroundColor;
+
+ //si tiene más de una researchline le ponemos all al link a las publicaciones
+ let pubResearchLine = "all";
+ if (researchLine && researchLine.length == 1) {
+ pubResearchLine = researchLine[0];
+ }
// PROJECT
const projectCard = (
-
-
-
- {date}
-
-
- {category}
-
-
-
-
- {title}
- {subtitle}
- {description && {description}}
-
-
- {renderTags(tags)}
+
+
+
+
+
+
+
+
+ {/* lg:gap-[22px] */}
+
+
+ {title && 18 ? "items-start" : "items-center"}`}>{title}
+ }
+
+
+ {description_translation &&
+
}
+
+ {t(`research.filter.${category}`)}
+
·
+
{date && date[0]}
+
*/}
+ {author}
+
+ {Array.isArray(keywords) ? keywords.map((keyword, index) => {
+ return (
+ {keyword}
+ )
+ }) : null}
+
+
{doi ? (
-
- {console.log(date && date[0])}
-
-
+
);
-
+
// TEAM - ok
const teamCard = (
{(img || svg) && (
-
+
+
+
+
+
+
+
+ {name}
+
+ {/* {position && ( {position})} */}
+
{role && {role}}
{email && (
-
+
+
{email}
-
+
)}
+
+
+ {description_translation}
+
+ {isExpanded ? t(`projects.card.toggleLess`) : t(`projects.card.toggleMore`)}
+
+
+
+
+ {researchgate &&
+
+
+ }
+ {orcid &&
+
+ }
+ {/* {webOfScience &&
+
+ } */}
+ {googleScholar &&
+
+ }
+ {linkedin &&
+
+ }
+ {portalUpm &&
+
+ }
+
-