feat: add zine-direction shared components

app/components/EventsMiniSidebar.vue

@@ -0,0 +1,98 @@
+<template>
+  <aside class="events-mini">
+    <div class="em-label">Upcoming</div>
+    <div v-for="event in events" :key="event._id" class="em-item">
+      <span class="em-date">{{ formatDate(event.date) }}</span>
+      <NuxtLink :to="`/events/${event._id}`" class="em-title">{{ event.title }}</NuxtLink>
+      <span
+        v-if="event.circle"
+        class="em-circle"
+        :style="{ color: `var(--c-${event.circle})` }"
+      >{{ event.circle }}</span>
+    </div>
+    <div v-if="!events?.length" class="em-empty">No upcoming events</div>
+    <NuxtLink to="/events" class="em-link">All events &rarr;</NuxtLink>
+  </aside>
+</template>
+
+<script setup>
+defineProps({
+  events: { type: Array, default: () => [] },
+})
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+</script>
+
+<style scoped>
+.events-mini {
+  padding: 24px 20px;
+  border-left: 1px dashed var(--border);
+  min-height: 100%;
+}
+
+.em-label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 12px;
+}
+
+.em-item {
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+}
+
+.em-item:last-child {
+  border-bottom: none;
+}
+
+.em-date {
+  font-size: 11px;
+  color: var(--text-faint);
+  display: block;
+}
+
+.em-title {
+  font-size: 12px;
+  color: var(--text);
+  display: block;
+  margin-top: 2px;
+  text-decoration: none;
+}
+
+.em-title:hover {
+  color: var(--candle);
+}
+
+.em-circle {
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 2px;
+  display: inline-block;
+}
+
+.em-link {
+  display: block;
+  margin-top: 12px;
+  font-size: 11px;
+  color: var(--candle);
+}
+
+.em-empty {
+  font-size: 11px;
+  color: var(--text-faint);
+  padding: 8px 0;
+}
+
+@media (max-width: 1024px) {
+  .events-mini {
+    display: none;
+  }
+}
+</style>