Add version and some icons

2 files changed, 13 insertions, 15 deletions

diff --git a/pages/tracks/[slug].vue b/pages/tracks/[slug].vue
index 38bce61..85f00b6 100644
--- a/pages/tracks/[slug].vue
+++ b/pages/tracks/[slug].vue
@@ -8,24 +8,23 @@ const track = scheduleStore.schedule?.tracks.find((track) => track.slug === rout
 </script>
 
 <template>
-  <Panel v-if="track">
-    <h2 class="events-title">{{ track.name }}</h2>
-      <ul class="events-list">
-        <li 
-          v-for="event in scheduleStore.eventsPerTrack[track.name]" 
-          :key="event.id" 
-          class="event-item"
-        >
-          <EventListing :event="event" />
-        </li>
-      </ul>
+  <Panel v-if="track" :title="track.name" :breadcrumbs="[{ text: 'Tracks', to: '/tracks' }]">
+    <ul class="events-list">
+      <li 
+        v-for="event in scheduleStore.eventsPerTrack[track.name]" 
+        :key="event.id" 
+        class="event-item"
+      >
+        <EventListing :event="event" />
+      </li>
+    </ul>
   </Panel>
 </template>
 
 <style>
 .events-list {
   list-style: none;
-  margin: 0;
+  margin: -1rem 0;
   padding: 0;
   display: grid;
 }
diff --git a/pages/tracks/index.vue b/pages/tracks/index.vue
index 35641ab..544847b 100644
--- a/pages/tracks/index.vue
+++ b/pages/tracks/index.vue
@@ -5,8 +5,7 @@ const scheduleStore = useScheduleStore();
 </script>
 
 <template>
-  <Panel v-if="scheduleStore.schedule">
-    <h2 class="tracks-title">Tracks</h2>
+  <Panel v-if="scheduleStore.schedule" title="Tracks">
     <ul class="tracks-list">
       <li 
         v-for="track in scheduleStore.schedule.tracks" 
@@ -24,7 +23,7 @@ const scheduleStore = useScheduleStore();
 <style scoped>
 .tracks-list {
   list-style: none;
-  margin: 0.5rem 0 0 0;
+  margin: -0.5rem 0 0 0;
   padding: 0;
   display: grid;
 }