Add Video Item component

src/components/common/VideoItem.astro

@@ -0,0 +1,76 @@
+---
+// Properties
+const {
+    ID,
+    Title,
+    Creator,
+    Views,
+    UploadDate,
+    Length
+} = Astro.props
+
+// i18n
+import { t } from "i18next"
+
+// Format Published Date
+const DateFormat = new Date(UploadDate * 1000).toLocaleDateString()
+
+// Format Video Length
+// Thanks to "mingjunlu" for helping out with the time format
+
+// Format Views
+const ViewsConversion = Intl.NumberFormat('en', { notation: 'compact'})
+const ViewsFormat = ViewsConversion.format(Views)
+---
+
+<a href={'/watch?v=' + ID} class="video-item">
+    <div class="video-item-thumbnail">
+        <img src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/>
+    </div>
+    <div class="video-item-details">
+        <p id="vi-title">{Title}</p>
+        <p id="vi-author">{t("watch.By")} {Creator}</p>
+        <p id="vi-viewCount">{ViewsFormat} {t("watch.Views")} - {DateFormat}</p>
+    </div>
+</a>
+
+<style lang="scss">
+.video-item {
+    display: flex;
+    flex-direction: column;
+    color: white;
+    text-decoration: none;
+    .video-item-thumbnail {
+        img {
+            width: 100%;
+            border-radius: 6px;
+            aspect-ratio: 16/9;
+            object-fit: contain;
+            background: #cfcfcf;
+        }
+        p#vi-length {
+            margin: -41px 8px 0px 0px;
+            background: rgba(0,0,0,0.75);
+            padding: 6px 12px;
+            width: max-content;
+            border-radius: 3rem;
+            position: relative;
+            float: right;
+            font-size: 14px;
+        }
+    }
+    .video-item-details {
+        display: flex;
+        flex-direction: column;
+        p {
+            margin: 0px;
+            &#vi-title {
+                font-weight: bold;
+            }
+            &#vi-author {
+                color: darkgrey;
+            }
+        }
+    }
+}
+</style>