3 files changed, 119 insertions, 2 deletions
diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro
new file mode 100644
index 0000000..b615c2d
--- /dev/null
+++ b/src/components/EventCard.astro
@@ -0,0 +1,63 @@
+---
+import { Badge } from '@/components/ui/badge'
+import { formatDate, iconMappings } from '@/lib/utils'
+import { Icon } from 'astro-icon/components'
+import { Image } from 'astro:assets'
+import type { CollectionEntry } from 'astro:content'
+import Link from './Link.astro'
+
+interface Props {
+  entry: CollectionEntry<'events'>
+}
+
+const { entry } = Astro.props
+const formattedDate = formatDate(entry.data.date)
+---
+
+<div
+  class="hover:bg-muted/50 rounded-xl border p-4 transition-colors duration-300 ease-in-out"
+>
+  <Link
+    href={`/${entry.collection}/${entry.id}`}
+    class="flex flex-col gap-4 sm:flex-row"
+  >
+    {
+      entry.data.image && (
+        <div class="w-full sm:max-w-3xs sm:shrink-0">
+          <Image
+            src={entry.data.image}
+            alt={entry.data.title}
+            width={1200}
+            height={630}
+            class="object-cover"
+          />
+        </div>
+      )
+    }
+
+    <div class="grow">
+      <h3 class="mb-1 text-lg font-medium">{entry.data.title}</h3>
+      <p class="text-muted-foreground mb-2 text-sm">{entry.data.description}</p>
+
+      <div
+        class="text-muted-foreground mb-2 flex flex-wrap items-center gap-x-2 text-xs"
+      >
+        <span>{formattedDate}</span>
+      </div>
+
+      {
+        entry.data.type && (
+          <div class="flex flex-wrap gap-2">
+            <Badge variant="muted" className="flex items-center gap-x-1">
+              <Icon
+                name={iconMappings[entry.data.type] || 'lucide:hash'}
+                class="size-3"
+              />
+              {entry.data.type}
+            </Badge>
+          </div>
+        )
+      }
+    </div>
+  </Link>
+</div>
diff --git a/src/components/EventNavigation.astro b/src/components/EventNavigation.astro
new file mode 100644
index 0000000..f1b76ce
--- /dev/null
+++ b/src/components/EventNavigation.astro
@@ -0,0 +1,54 @@
+---
+import Link from '@/components/Link.astro'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { Icon } from 'astro-icon/components'
+
+const { newerEvent, olderEvent } = Astro.props
+---
+
+<nav class={cn('col-start-2 grid grid-cols-1 gap-4', 'sm:grid-cols-2')}>
+  <Link
+    href={olderEvent ? `/events/${olderEvent.id}#event-title` : '#'}
+    class={cn(
+      buttonVariants({ variant: 'outline' }),
+      'rounded-lg group flex items-center justify-start size-full',
+      !olderEvent && 'pointer-events-none opacity-50 cursor-not-allowed',
+    )}
+    aria-disabled={!olderEvent}
+  >
+    <Icon
+      name="lucide:arrow-left"
+      class="mr-2 size-4 transition-transform group-hover:-translate-x-1"
+    />
+    <div class="flex flex-col items-start overflow-hidden text-wrap">
+      <span class="text-muted-foreground text-left text-xs">
+        Previous Event
+      </span>
+      <span class="w-full text-left text-sm text-balance text-ellipsis">
+        {olderEvent?.data.title || "You're at the oldest event!"}
+      </span>
+    </div>
+  </Link>
+
+  <Link
+    href={newerEvent ? `/events/${newerEvent.id}#event-title` : '#'}
+    class={cn(
+      buttonVariants({ variant: 'outline' }),
+      'rounded-lg group flex items-center justify-end size-full',
+      !newerEvent && 'pointer-events-none opacity-50 cursor-not-allowed',
+    )}
+    aria-disabled={!newerEvent}
+  >
+    <div class="flex flex-col items-end overflow-hidden text-wrap">
+      <span class="text-muted-foreground text-right text-xs"> Next Event </span>
+      <span class="w-full text-right text-sm text-balance text-ellipsis">
+        {newerEvent?.data.title || "You're at the newest event!"}
+      </span>
+    </div>
+    <Icon
+      name="lucide:arrow-right"
+      class="ml-2 size-4 transition-transform group-hover:translate-x-1"
+    />
+  </Link>
+</nav>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7ff1e50..6b37226 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -15,10 +15,10 @@ import SocialIcons from './SocialIcons.astro'
     <Separator orientation="vertical" className="hidden h-4! sm:block" />
     <p class="text-muted-foreground text-sm">
       Made with 🤍 by <Link
-        href="https://github.com/jktrn"
+        href="https://codeberg.org/fosscet/"
         class="text-foreground"
         external
-        underline>enscribe</Link
+        underline>fosscet</Link
       >!
     </p>
   </div>