From 280c2b8623e0b3da134ac64b6bc3a66e2f1d71c6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 2 Jan 2023 20:36:04 +0400
Subject: [PATCH] Add video detail page

---
 src/components/VideoHeader.astro | 36 ++++++++++++++++++++++++++++++++
 src/pages/videos/[videoId].astro | 32 ++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 src/components/VideoHeader.astro
 create mode 100644 src/pages/videos/[videoId].astro

diff --git a/src/components/VideoHeader.astro b/src/components/VideoHeader.astro
new file mode 100644
index 000000000..e6efc49f1
--- /dev/null
+++ b/src/components/VideoHeader.astro
@@ -0,0 +1,36 @@
+---
+import type { VideoFileType } from '../lib/video';
+
+export interface Props {
+  video: VideoFileType;
+}
+
+const { video } = Astro.props;
+const { frontmatter } = video;
+const { author } = frontmatter;
+---
+
+<div class='bg-white border-b py-5 sm:py-12'>
+  <div class='container text-left sm:text-center'>
+    <p
+      class='text-gray-400 hidden sm:flex items-center justify-start sm:justify-center'
+    >
+      <a
+        href={author.url}
+        target='_blank'
+        class='font-medium hover:text-gray-600 inline-flex items-center hover:underline'
+      >
+        <img src={author.imageUrl} class='w-5 h-5 inline mr-2 rounded-full' />
+        {author.name}
+      </a>
+      <span class='mx-1.5'>&middot;</span>
+      <span class='capitalize'>Illustrated Video</span>
+    </p>
+    <h1 class='text-2xl sm:text-5xl my-0 sm:my-3.5 font-bold'>
+      {frontmatter.title}
+    </h1>
+    <p class='hidden sm:block text-gray-400 text-md'>
+      {frontmatter.description}
+    </p>
+  </div>
+</div>
diff --git a/src/pages/videos/[videoId].astro b/src/pages/videos/[videoId].astro
new file mode 100644
index 000000000..47cde47fe
--- /dev/null
+++ b/src/pages/videos/[videoId].astro
@@ -0,0 +1,32 @@
+---
+import VideoHeader from '../../components/VideoHeader.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getAllVideos, VideoFileType } from '../../lib/video';
+import '../../styles/prism.css';
+
+export interface Props {
+  video: VideoFileType;
+}
+
+export async function getStaticPaths() {
+  const videos = await getAllVideos();
+
+  return videos.map((video) => ({
+    params: { videoId: video.id },
+    props: { video },
+  }));
+}
+
+const { videoId } = Astro.params;
+const { video } = Astro.props;
+---
+
+<BaseLayout title='Simple Video'>
+  <VideoHeader video={video} />
+
+  <div class='bg-gray-50 py-5 sm:py-10'>
+    <div class='container prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'>
+      <video.Content />
+    </div>
+  </div>
+</BaseLayout>