Skip to content

Commit

Permalink
image load test
Browse files Browse the repository at this point in the history
  • Loading branch information
@lauralog
lauralog committed Oct 16, 2024
1 parent 5fd43f8 commit 88ddb2e
Show file tree
Hide file tree
Showing 17 changed files with 85 additions and 811 deletions.
46 changes: 12 additions & 34 deletions app/courses/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Link from "next/link";
import { mycourses } from "@/constants/courses.js";
import { useTranslation } from 'react-i18next';
import { FaceIcon } from "@radix-ui/react-icons";
import { Card, CardVariants } from "@/components/core/Cards";


export default function Courses() {
Expand All @@ -27,41 +28,18 @@ export default function Courses() {
<p>{t('courses.desc')}</p>
</div>
<div className=" grid gap-4 md:grid-cols-2 sm:grid-cols-1">
{courses.map(({ date, gradient, edition, title, description, route }) => {
{courses.map(({ date, edition, title, description, route }) => {
return (
<div
key={title}
className={`rounded-lg px-6 py-4 course ${gradient}`}
>
<div className="course_main transition">
<div className="course_content">
<div className="card_container_top">
<div className="flex gap-3">
<span className="course_tag">
<small>{date}</small>
</span>
<span className="course_tag">
<small> {edition}{t('courses.tag')}</small>
</span>
</div>
<button className="course_route">
<CreateLink route={route}>
<FaceIcon />
<span>{t('courses.button')}</span>
</CreateLink>
</button>
</div>
<div className="course_text_block">
<div className="course_title">
<h4>{title}</h4>
</div>
<div className="course_description">
<small> {description}</small>
</div>
</div>
</div>
</div>
</div>
<Card
cardType={"course"}
date={date}
title={title}
subtitle={"edition " + edition}
description={description}
category={"MOOC"}
buttonText={"curso"}
href={route}
/>
);
})}
</div>
Expand Down
11 changes: 4 additions & 7 deletions app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,11 @@ export default function Page() {
{t("front.action-button")} <ArrowRightIcon className=" h-4 w-4" />
</Button>
</BannerContent>
<BannerImg
src="placeholder.jpg"
<Image
src="assets/fondos/background_banner.png"
alt="Descripción de la imagen"
fit="contain"
hasBadge={true}
badgeVariant=""
badgeSize=""
// className={"hidden"}
fit="cover"
hasBadge={false}
/>
</Banner>
{/* <BannerPum></BannerPum> */}
Expand Down
110 changes: 67 additions & 43 deletions components/core/Cards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
CardSubtitle,
CardDescription,
CardFooter,
CardHeader
CardHeader,
} from "@/components/ui/customCard";

import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -50,7 +50,6 @@ const tagContainerClasses = cn(
"mt-6 w-full flex flex-wrap gap-2 justify-start"
);


/**
* Se puede integrar si cambiamos el modelo de datos del json por array
* @param {String} tags
Expand All @@ -60,45 +59,46 @@ 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) => (
<Badge key={index} variant="default">{tag}</Badge> // Añade una key a cada Label
<Badge key={index} variant="default">
{tag}
</Badge> // Añade una key a cada Label
));
};

// 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
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 (
<Badge variant="outline" size="lg">{categoryFormat}</Badge>
)
<Badge variant="outline" size="lg">
{categoryFormat}
</Badge>
);
};

const translateCategory = (category, currentLang) => {
if (currentLang == "es") {
if (category == "article-journal") {
category = "artículo-revista";
console.log(category)
}
else if (category == "paper-conference") {
console.log(category);
} else if (category == "paper-conference") {
category = "acta-congreso";
console.log(category)
}
else if (category == "book") {
console.log(category);
} else if (category == "book") {
category = "libro";
console.log(category)
}
else if (category == "chapter") {
console.log(category);
} else if (category == "chapter") {
category = "capítulo";
console.log(category)
}
console.log(category);
}
} else if (currentLang == "en") {
// transformar "artículo-revista" en article journal
}
return renderCategory(category)
}

return renderCategory(category);
};

const Card = React.forwardRef(
(
Expand Down Expand Up @@ -126,11 +126,9 @@ const Card = React.forwardRef(
cardType,
role,
currentLang,
basePath

basePath,
},
ref

) => {
const { t } = useTranslation();

Expand Down Expand Up @@ -160,7 +158,15 @@ const Card = React.forwardRef(

// COURSE
const courseCard = (
<CustomCard className={cn(CardVariants({ direction, className }))}>
<CustomCard
className={cn(CardVariants({ direction, className }))}
style={{
backgroundImage: "url('assets/fondos/background_image.png')",
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
>
<CardHeader className="flex w-full gap-2 items-center">
<Badge variant="outline" size="lg">
{date}
Expand All @@ -173,18 +179,28 @@ const Card = React.forwardRef(
Ir al curso <ExternalLinkIcon className="w-5 h-5" />
</Button>
</CardHeader>
{/* <Image
className={"h-40"}
src={img || "placeholder.jpg"} // La imagen por defecto será una cadena vacía si no hay src
alt={title || "Image"} // Usa el título como alt si existe
fit="cover" // Ajustamos el contenido al contenedor
/> */}
<CardContent>
<CardTitle>{title}</CardTitle>
<CardSubtitle level="h6">{subtitle}</CardSubtitle>
<CardDescription>{description}</CardDescription>
<div className={tagContainerClasses}>{renderTags(tags)}</div>
{/* <div className={tagContainerClasses}>{renderTags(tags)}</div> */}
</CardContent>
</CustomCard>
);

// PUBLICATIONS - ok
const publicationCard = (
<CustomCard className={cn(CardVariants({ direction, className })+ " bg-background")}>
<CustomCard
className={cn(
CardVariants({ direction, className }) + " bg-background"
)}
>
<CardHeader>
<Badge variant="outline" size="lg">
{date}
Expand All @@ -201,8 +217,8 @@ const Card = React.forwardRef(
{doi ? (
<Button asChild variant="" radius="rounded_md">
<Link rel="noopener noreferrer" target="_blank" href={doi}>
{t("publications.action-button")}
{t("publications.action-button")}

<ArrowRightIcon />
</Link>
</Button>
Expand All @@ -225,7 +241,7 @@ const Card = React.forwardRef(
src={img || "placeholder.jpg"} // La imagen por defecto será una cadena vacía si no hay src
alt={title || "Image"} // Usa el título como alt si existe
fit="cover" // Ajustamos el contenido al contenedor
hasBadge={position? true : false} // Por defecto, no tiene badge
hasBadge={position ? true : false} // Por defecto, no tiene badge
badgeContent={position}
/>
)}
Expand All @@ -234,8 +250,14 @@ const Card = React.forwardRef(
<CardTitle level="h5" className={"text-inherit text-center"}>
{name}
</CardTitle>
{ role && (<CardDescription type="short-p">{role}</CardDescription>)}
{email && <CardDescription className={"font-semibold break-words text-wrap"}>{email}</CardDescription>}
{role && <CardDescription type="short-p">{role}</CardDescription>}
{email && (
<CardDescription
className={"font-semibold break-words text-wrap"}
>
{email}
</CardDescription>
)}
</CardContent>
)}
{/* {( email &&
Expand All @@ -250,22 +272,24 @@ const Card = React.forwardRef(
<CustomCard className={cn(CardVariants({ direction, className }))}>
{img && (
<Image
src={/* process.env.PUBLIC_URL */ +img || "placeholder.jpg"}
alt={/* process.env.PUBLIC_URL */ +img || "placeholder.jpg"}
className={"h-24"}
fit="contain"
/>
src={/* process.env.PUBLIC_URL */ +img || "placeholder.jpg"}
alt={/* process.env.PUBLIC_URL */ +img || "placeholder.jpg"}
className={"h-24"}
fit="contain"
/>
)}
<CardContent>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</CardContent>
<CardFooter>
{( github && <Button asChild variant="link">
<Link rel="noopener noreferrer" target="_blank" href={github}>
GitHub
</Link>
</Button>)}
{github && (
<Button asChild variant="link">
<Link rel="noopener noreferrer" target="_blank" href={github}>
GitHub
</Link>
</Button>
)}
<Button asChild variant="secondary" radius="rounded_md">
<Link rel="noopener noreferrer" target="_blank" href={route}>
Ver herramienta
Expand Down
9 changes: 0 additions & 9 deletions public/assets/css/bootstrap-responsive.min.css
View file

This file was deleted.

9 changes: 0 additions & 9 deletions public/assets/css/bootstrap.min.css
View file

This file was deleted.

Loading

0 comments on commit 88ddb2e

Please sign in to comment.