Add Blog Posts to website

astro/src/components/blogs/BlogPost.astro

@@ -0,0 +1,39 @@
+---
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+
+interface Props {
+    blog: BlogPost;
+}
+
+const { blog } = Astro.props;
+---
+
+<div
+    id={`blog-${blog.id}`}
+    class="flex flex-row justify-center items-center"
+>
+    <div class="flex lg:flex-col flex-col py-12 px-12 gap-y-8 gap-x-18 lg:max-w-[67%] w-full">
+        <div class="flex flex-col gap-3">
+            <h1 class="font-semibold text-5xl">{blog.title}</h1>
+            <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                <CalendarIcon width={20} height={20} />
+                <div>{blog.date}</div>
+            </div>
+        </div>
+
+        <div>
+            <Image
+                src={getImageUrl(blog.searchEngine.thumbnail.url)}
+                width="1200"
+                height="630"
+                alt={blog.title}
+                class="rounded-2xl shadow-md object-cover"
+            />
+        </div>
+
+        <div set:html={markdownToHtml(blog.content)}></div>
+    </div>
+</div>