64 lines
3.0 KiB
Plaintext
64 lines
3.0 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import { Image } from "@unpic/astro";
|
|
import Button from "../ui/Button.astro";
|
|
import dayjs from "dayjs";
|
|
import utc from "dayjs/plugin/utc";
|
|
import { createTranslator, getLocalizedRoute } from '../../i18n';
|
|
|
|
const currentLocale = Astro.currentLocale;
|
|
const tl = createTranslator(currentLocale);
|
|
|
|
const items = await getCollection("editorial", (post)=>{
|
|
return post.data.locale == currentLocale
|
|
});
|
|
|
|
const sorted = [...items]
|
|
.sort((a, b) => {
|
|
const dateDiff = new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
|
|
if (dateDiff !== 0) return dateDiff
|
|
return (a.data.order ?? 0) - (b.data.order ?? 0)
|
|
})
|
|
.slice(0, 6);
|
|
|
|
dayjs.extend(utc);
|
|
dayjs.locale(currentLocale || "es");
|
|
---
|
|
|
|
<div id="editorial" class="bg-[#EBE5D0] py-10 lg:py-14">
|
|
<div class="container mx-auto px-4 md:px-0 max-w-4xl">
|
|
<div class="flex flex-col items-center mb-8">
|
|
<h4 class="text-[#003421] text-2xl uppercase font-bold text-center font-primary">{tl("editorial.title")}</h4>
|
|
<h2 class="text-[#003421] text-3xl md:text-4xl font-bold text-center font-secondary mt-1">{tl("editorial.text")}</h2>
|
|
</div>
|
|
|
|
<div class="divide-y divide-[#003421]/10">
|
|
{
|
|
sorted.map((item) => {
|
|
const date = dayjs.utc(item.data.date).format("D MMMM YYYY");
|
|
const url = `/${currentLocale}/${getLocalizedRoute("editorial", currentLocale)}/${item.data.slug}`;
|
|
const thumb = item.data.thumbnail_square || item.data.thumbnail;
|
|
return (
|
|
<a href={url} class="flex gap-5 py-5 group hover:bg-[#003421]/5 transition-colors -mx-3 px-3 rounded-sm">
|
|
<div class="w-20 h-20 md:w-24 md:h-24 shrink-0 overflow-hidden rounded-sm bg-[#003421]/10">
|
|
{thumb && (
|
|
<Image src={thumb} alt={item.data.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
|
|
)}
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm md:text-base font-primary font-semibold text-[#22523F]">Dr. José Benjamín Pérez Matos</p>
|
|
<p class="text-sm text-[#003421]/50 font-primary mt-0.5">{date}</p>
|
|
<h3 class="text-base md:text-lg font-secondary font-bold text-[#003421] group-hover:text-[#003421]/60 transition-colors mt-1 leading-snug line-clamp-2">{item.data.title}</h3>
|
|
</div>
|
|
</a>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<Button class="px-6 py-2.5 uppercase text-sm" url={`/${currentLocale}/${getLocalizedRoute('editorial', currentLocale)}`} variant="primary" title={tl("editorial.buttonLable")} />
|
|
</div>
|
|
</div>
|
|
</div>
|