Add last projects component and fixing some small bugs

astro/src/components/web/LastProjects.astro

@@ -0,0 +1,64 @@
+---
+import { getLastProjects } from '@/content/projects/projects';
+import { getSettings } from '@/content/settings/settings';
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { 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);
+
+console.log(lastProjects[0].searchEngine);
+---
+
+<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-4 rounded-full"
+            >
+                {projects.readMoreButtonText}
+            </a>
+        </div>
+    </div>
+
+    <div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
+        { lastProjects.map((project) => (
+            <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"
+                    width={600}
+                    height={315}
+                />
+                <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>

astro/src/components/webpage/Webpage.astro

@@ -7,6 +7,7 @@ import WallOfText from '../web/WallOfText.astro';
 import EquipmentTable from '../web/EquipmentTable.astro';
 import Reviews from '../web/Reviews.astro';
 import LastBlogs from '../web/LastBlogs.astro';
+import LastProjects from '../web/LastProjects.astro';
 
 interface Props {
     webpage: WebpageComponent[];
@@ -28,6 +29,7 @@ console.log(Astro.props.webpage);
             { component.component === "EquipmentTable" && <EquipmentTable equipment={component} /> }
             { component.component === "Reviews" && <Reviews reviews={component} /> }
             { component.component === "LastBlogs" && <LastBlogs blogs={component} /> }
+            { component.component === "LastProjects" && <LastProjects projects={component} /> }
         </Fragment>
     )) }
 </div>