1 files changed, 53 insertions, 0 deletions
diff --git a/pse-dashboard/src/components/EpisodeEntry.vue b/pse-dashboard/src/components/EpisodeEntry.vue
new file mode 100644
index 0000000..c651484
--- /dev/null
+++ b/pse-dashboard/src/components/EpisodeEntry.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { LastUpdate, ProgressTime } from '@/components'
+
+const props = defineProps({
+    action: {
+        type: Object,
+        default: undefined
+    }
+});
+
+</script>
+<template>
+    <a
+        href="#"
+        class="list-group-item list-group-item-action py-3"
+        aria-current="true"
+    >
+        <!-- title with timestamp -->
+        <div class="d-flex gap-3">
+            <i
+                class="fa fa-podcast rounded-circle flex-shring-0"
+                style="font-size: 32px"
+            />
+            <div class="d-flex gap-2 w-100 justify-content-between">
+                <div>
+                    <h6 class="mb-0">{{ action.title }}</h6>
+                    <p class="mb-0 opacity-75">{{ action.description }}</p>
+                </div>
+                <small class="opacity-50 text-nowrap">
+                    <LastUpdate :iso="action.timestamp" />
+                </small>
+            </div>
+        </div>
+
+        <!-- Progress bar with Progress time -->
+        <div class="d-flex">
+            <ProgressTime :unix="action.position" />
+            <div
+                class="progress flex-grow-1 m-2"
+                style="height:10px; "
+            >
+                <div
+                    class="progress-bar"
+                    :style="{width: 100*action.position/action.total + '%'}"
+                />
+            </div>
+            <ProgressTime :unix="action.total" />
+        </div>
+    </a>
+</template>
+<style>
+</style>
+