From 374e8a04fd728ceb20f62ca1d51f7dd6790eec24 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 5 Oct 2021 08:05:24 +0200
Subject: [PATCH] Add cap theorem video

---
 content/videos.json                   | 11 +++++++++++
 content/videos/what-is-cap-theorem.md |  1 +
 pages/[roadmap]/index.tsx             |  2 +-
 pages/roadmaps.tsx                    |  2 ++
 4 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 content/videos/what-is-cap-theorem.md

diff --git a/content/videos.json b/content/videos.json
index 5f6fbff74..5f8291f42 100644
--- a/content/videos.json
+++ b/content/videos.json
@@ -1,4 +1,15 @@
 [
+  {
+    "id": "what-is-cap-theorem",
+    "title": "What is CAP Theorem?",
+    "description": "An illustrated explanation to CAP theorem with examples and proof.",
+    "isPro": false,
+    "youtubeLink": "https://www.youtube.com/watch?v=_RbsFXWRZ10",
+    "authorUsername": "kamranahmedse",
+    "duration": "8 minutes",
+    "updatedAt": "2021-10-05T19:59:14.191Z",
+    "createdAt": "2021-10-05T19:59:14.191Z"
+  },
   {
     "id": "acid-explained",
     "title": "ACID Explained: Atomic, Consistent, Isolated Durable",
diff --git a/content/videos/what-is-cap-theorem.md b/content/videos/what-is-cap-theorem.md
new file mode 100644
index 000000000..6b3e12ff3
--- /dev/null
+++ b/content/videos/what-is-cap-theorem.md
@@ -0,0 +1 @@
+<iframe src="https://www.youtube.com/embed/_RbsFXWRZ10" title="What is CAP Theorem?" />
diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx
index 88f4d1918..e659f41be 100644
--- a/pages/[roadmap]/index.tsx
+++ b/pages/[roadmap]/index.tsx
@@ -50,7 +50,7 @@ function TextualRoadmap(props: RoadmapProps) {
   );
 }
 
-function NewBanner() {
+export function NewBanner() {
   return (
     <Text _hover={{ textDecoration: 'none', color: 'blue.700', '& .new-badge': { bg: 'blue.700' } }}
           as={Link}
diff --git a/pages/roadmaps.tsx b/pages/roadmaps.tsx
index 30ae75364..61fb6a30d 100644
--- a/pages/roadmaps.tsx
+++ b/pages/roadmaps.tsx
@@ -7,6 +7,7 @@ import { PageHeader } from '../components/page-header';
 import { RoadmapGridItem } from '../components/roadmap/roadmap-grid-item';
 import { getAllRoadmaps, RoadmapType } from '../lib/roadmap';
 import Helmet from '../components/helmet';
+import { NewBanner } from './[roadmap]';
 
 type RoadmapsProps = {
   roadmaps: RoadmapType[];
@@ -24,6 +25,7 @@ export default function Roadmaps(props: RoadmapsProps) {
       />
       <Box mb='60px'>
         <PageHeader
+          beforeTitle={<NewBanner />}
           title={'Developer Roadmaps'}
           subtitle={'Step by step guides and paths to learn different tools or technologies'}
         />