Add recent talk component for each video

src/components/recent-talks/index.vue

@@ -2,12 +2,33 @@
   <section class="py-4">
     <div class="mx-auto px-4">
       <h2 class="text-2xl font-bold uppercase text-center">Recent Talks</h2>
+
+      <div class="mt-2 grid grid-cols-4 gap-8">
+        <recent-talk v-for="(talk, i) in talks" :key="i" :talk="talk"/>
+      </div>
     </div>
   </section>
 </template>
 
 <script>
+import RecentTalk from '@/components/recent-talks/recent-talk'
+import { getTalks } from '@/services/talk-service'
+
 export default {
-  name: 'RecentTalks'
+  name: 'RecentTalks',
+
+  components: {
+    RecentTalk
+  },
+
+  data() {
+    return {
+      talks: []
+    }
+  },
+
+  created() {
+    this.talks = getTalks()
+  }
 }
 </script>

src/components/recent-talks/recent-talk.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-col flex-col-reverse justify-end">
+    <div class="mt-5 py-2 text-lg font-bold border-t-2 border-b-2">
+      {{ talk.title }}
+    </div>
+
+    <div class="embed-responsive">
+      <div class="embed-responsive-item">
+        <iframe :src="`https://www.youtube.com/embed/${talk.videoId}`"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RecentTalk',
+
+  props: {
+    talk: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>