removed example assets, added new logos, component for meetuplisting …

…item

packages/site/src/components/BaseHead.astro

@@ -11,7 +11,11 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
+const {
+  title,
+  description,
+  image = '/images/oulu-devmeetups-hero.jpg',
+} = Astro.props;
 ---
 
 <!-- Global Metadata -->

packages/site/src/components/MeetupListItem.astro

@@ -0,0 +1,58 @@
+---
+const { name, time, location, organizer, slug } = Astro.props;
+// TODO: use different devLogos
+// TODO: green light for future, red for past
+---
+
+<li class="relative py-5 hover:bg-gray-50">
+  <a href={`${import.meta.env.BASE_URL}meetups/${slug}`}>
+    <div class="px-4 sm:px-6 lg:px-8">
+      <div class="mx-auto flex max-w-4xl justify-between gap-x-6">
+        <div class="flex gap-x-4">
+          <img
+            class="h-12 w-12 flex-none rounded-full bg-gray-50"
+            src="/images/dev-logo.jpg"
+            alt=""
+          />
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">
+              <span class="absolute inset-x-0 -top-px bottom-0"></span>
+              {name}
+            </p>
+            <p class="mt-1 flex text-xs leading-5 text-gray-500">
+              {organizer}
+            </p>
+          </div>
+        </div>
+        <div class="flex items-center gap-x-4">
+          <div class="hidden sm:flex sm:flex-col sm:items-end">
+            <p
+              class="text-sm font-semibold first-letter:leading-6 text-gray-900"
+            >
+              {time}
+            </p>
+            <div class="mt-1 flex items-center gap-x-1.5">
+              <p class="text-xs leading-5 text-gray-500">{location}</p>
+              <div class="flex-none rounded-full bg-emerald-500/20 p-1">
+                <div class="h-1.5 w-1.5 rounded-full bg-emerald-500"></div>
+              </div>
+            </div>
+          </div>
+          <svg
+            class="h-5 w-5 flex-none text-gray-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+              clip-rule="evenodd"
+            >
+            </path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </a>
+</li>

packages/site/src/pages/meetups/index.astro

@@ -4,6 +4,7 @@ import Header from '../../components/Header.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import BaseHead from '../../components/BaseHead.astro';
 import { getCollection } from 'astro:content';
+import MeetupListItem from '../../components/MeetupListItem.astro';
 
 const meetups = await getCollection('meetups');
 ---
@@ -17,26 +18,22 @@ const meetups = await getCollection('meetups');
     <div class="py-10">
       <main>
         <div class="mx-auto max-w-7xl px-4 py-24 sm:px-6 sm:py-32 lg:px-8">
+          <h1 class="text-2xl text-center m-8">Oulu developer meetups</h1>
           <div
-            class="mx-auto max-w-4xl border border-gray-400 p-8 sm:px-24 bg-gray-50"
+            class="mx-auto max-w-4xl border border-gray-400 rounded-xl p-8 sm:px-24 bg-gray-50"
           >
-            <h1 class="text-2xl text-center mb-4">Oulu developer meetups</h1>
             <main>
               <section>
-                <ul>
+                <ul role="list" class="divide-y divide-gray-100">
                   {
                     meetups.map((meetup) => (
-                      <li>
-                        <p>
-                          <a
-                            href={`${import.meta.env.BASE_URL}meetups/${
-                              meetup.slug
-                            }`}
-                          >
-                            {meetup.data.time} / {meetup.data.name}
-                          </a>
-                        </p>
-                      </li>
+                      <MeetupListItem
+                        name={meetup.data.name}
+                        location={meetup.data.location}
+                        time={meetup.data.time}
+                        organizer={meetup.data.organizer}
+                        slug={meetup.slug}
+                      />
                     ))
                   }
                 </ul>