d9430335d5
Fix imports, remove unnecessary imports, and replace all single apostrophe to double apostrophes
69 lines
2.5 KiB
Plaintext
69 lines
2.5 KiB
Plaintext
---
|
|
import { getLastProjects } from "@/content/projects/projects";
|
|
import { getSettings } from "@/content/settings/settings";
|
|
import CalendarIcon from "@/icons/CalendarIcon.astro";
|
|
import { getImageSize, getImageUrl } from "@/lib/images";
|
|
import { getProjectRoute } from "@/lib/routing";
|
|
import { Image } from "astro:assets";
|
|
|
|
interface Props {
|
|
projects: LastProjectsComponent;
|
|
}
|
|
|
|
function calculateSizeClasses(amount: number, length: number) {
|
|
if (amount === 2 || length <= 2) {
|
|
return "lg:w-[45%] w-full";
|
|
}
|
|
else {
|
|
return "lg:w-[31%] w-full";
|
|
}
|
|
}
|
|
|
|
const projects = Astro.props.projects;
|
|
const settings = await getSettings();
|
|
const lastProjects = await getLastProjects(projects.amount);
|
|
const size = calculateSizeClasses(projects.amount, lastProjects.length);
|
|
---
|
|
|
|
{ (settings.project.enabled && lastProjects.length > 0) && (
|
|
<div
|
|
id={`lastprojects-${projects.id}`}
|
|
class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
|
|
>
|
|
<div class="flex flex-row justify-between items-center w-full">
|
|
<h2 class="text-4xl font-bold">{projects.title}</h2>
|
|
<div>
|
|
<a
|
|
href={settings.project.indexRouteTemplate}
|
|
class="text-(--ptt) bg-(--ptc) hover:text-(--stt) hover:bg-(--stc) duration-200 py-3 px-5 rounded-full text-lg"
|
|
>
|
|
{projects.readMoreButtonText}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
|
|
{ lastProjects.map((project) => {
|
|
const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 0.5);
|
|
|
|
return (
|
|
<a href={getProjectRoute(settings.project, project)} class={`${size} flex flex-col gap-2`}>
|
|
<Image
|
|
src={getImageUrl(project.searchEngine.thumbnail.url)}
|
|
alt={project.title}
|
|
class="flex rounded-2xl shadow-md w-full"
|
|
width={imageSize.width}
|
|
height={imageSize.height}
|
|
/>
|
|
<h4 class="font-semibold text-[28px]">{project.title}</h4>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
|
|
<CalendarIcon width={20} height={20} />
|
|
<div>{project.date}</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}) }
|
|
</div>
|
|
</div>
|
|
) }
|