Update

src/lib/Avatar.svelte

@@ -77,6 +77,12 @@
 </div>
 {/if}
 
+{#if size === 'semi-small'}
+<div class="w-10 text-center">
+  <img src={currentImg} class="w-10 rounded-full m-auto" alt="{speaker.name}" />
+</div>
+{/if}
+
 {#if size === 'extra-small'}
 <div class="w-6 h-6 text-center">
   <a href="/lide/{speaker.id}"><img src={currentImg} class="w-6 rounded-full m-auto" alt="{speaker.name}" /></a>

src/lib/EventTypeLabel.svelte

@@ -1,5 +1,6 @@
 <script>
   export let event = {};
+  export let size = null;
 
   const config = {
     panel: { title: 'Panelová debata', style: 'bg-custom-red text-white' },
@@ -12,8 +13,8 @@
 
 </script>
 
-<div class="text-xs flex h-5">
+<div class="flex { size === 'big' ? 'h-6 text-sm' : 'h-5 text-xs' }">
   <div class="w-1 rounded-l-sm {current.style}"></div>
-  <div class="px-1.5 py-0.5 rounded-r-sm bg-gray-100 uppercase">{current.title}</div>
+  <div class="{ size === 'big' ? 'px-2 py-0.5' : 'px-1.5 py-0.5' } rounded-r-sm bg-gray-100 uppercase">{current.title}</div>
 </div>
 

src/routes/lide/[id].svelte

@@ -32,7 +32,7 @@
       <div><Avatar speaker={s} size="big" /></div>
       <div class="mt-4 sm:mt-0">
         <div class="mb-4 text-sm uppercase">Přednášející</div>
-        <h1 class="uppercase text-2xl font-bold">{s.name} {getFlagEmoji(s.country)}</h1>
+        <h1 class="text-2xl font-bold">{s.name} {getFlagEmoji(s.country)}</h1>
         {#if s.bio}
           <div class="mt-4 text-blue-web italic"><SvelteMarkdown source={s.bio} /></div>
         {/if}

src/routes/program.svelte

@@ -59,7 +59,7 @@
     {#each $bundle.spec.events.filter(e => !e.parent) as e}
       <div class="transition-all mb-4 border px-3 py-2 rounded-md shadow {$userData.favoriteEvents.includes(e.id) ? 'bg-yellow-100' : '' }" >
         <div class="float-right"><i class="fa-star {$userData.favoriteEvents.includes(e.id) ? 'fa-solid' : 'fa-regular'} cursor-pointer" utxo-event-id="{e.id}" on:click={handleFavorite}></i></div>
-        <div class="text-lg font-semibold">{e.name}</div>
+        <div class="text-lg font-semibold"><a href="/udalosti/{e.id}">{e.name}</a></div>
         {#if e.speakers && e.speakers.length > 0}
           <div class="mt-1 mb-2 flex flex-wrap gap-2">
             {#each speakersMap(e.speakers) as s}

src/routes/udalosti/[id].svelte

@@ -0,0 +1,48 @@
+<script context="module">
+	export const prerender = true;
+</script>
+
+<script>
+  import SvelteMarkdown from 'svelte-markdown';
+
+	import { page } from '$app/stores';
+  import { bundle } from '$lib/stores.js';
+  import EventTypeLabel from '$lib/EventTypeLabel.svelte';
+  import Avatar from '$lib/Avatar.svelte';
+
+  $: e = $bundle ? $bundle.spec.events.find(ev => ev.id === $page.params.id) : null
+
+  function speakersMap (arr) {
+    if (!arr) return;
+    return arr.map(sId => {
+      return $bundle.spec.speakers.find(sp => sp.id === sId)
+    })
+  }
+
+  function trackRender (trackId) {
+    const track = $bundle.spec.tracks.find(t => t.id === trackId)
+    return track.shortname || track.name
+  }
+
+</script>
+
+<section class="relative mx-auto py-10 px-6 max-w-6xl mb-10 text-blue-web">
+  {#if $bundle}
+    <div class="mb-4 flex flex-wrap gap-4">
+      <div><EventTypeLabel event={e} size="big" /></div>
+      <div class="text-md my-auto">{trackRender(e.track)}</div>
+      <div class="text-sm my-auto">{e.duration}m</div>
+    </div>
+    <h1 class="text-2xl font-bold">{e.name}</h1>
+    {#if e.speakers && e.speakers.length > 0}
+      <div class="mt-4 mb-2 flex flex-wrap gap-4">
+        {#each speakersMap(e.speakers) as s}
+          <div class="flex gap-1.5">
+            <Avatar speaker={s} size='semi-small' />
+            <div class="m-auto"><a href="/lide/{s.id}" class="text-xl">{s.name}</a></div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</section>