From b8686e83d1e0014909fc0253362d2eb2dbcfcf85 Mon Sep 17 00:00:00 2001
From: Ayush Tiwari <62030895+ayush2323@users.noreply.github.com>
Date: Sun, 24 Apr 2022 17:42:24 +0530
Subject: [PATCH 1/3] Update App.vue

---
 src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.vue b/src/App.vue
index 94ef46c..7013d43 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,6 +29,7 @@
       <router-link to="/contact">Contact</router-link>
       <router-link to="/leaderboards">Leaderboards</router-link>
       <router-link to="/event">Poem Event</router-link>
+      <router-link to="/talent-show">Talent Show</router-link>
     </div>
     <!-- <div class="login">
       <router-link to="/login">Login</router-link>

From 8b96375e15f9dbb48935c40166385b4effb1ee6f Mon Sep 17 00:00:00 2001
From: Ayush Tiwari <62030895+ayush2323@users.noreply.github.com>
Date: Sun, 24 Apr 2022 17:43:22 +0530
Subject: [PATCH 2/3] Update index.js

---
 src/router/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/router/index.js b/src/router/index.js
index ec3ec98..f5238f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -78,6 +78,11 @@ const routes = [
     name: `Component integration testing page`,
     component: () => import(`../views/ComponentIntegrationTesting.vue`),
   },
+  {
+    path: `/talent-show`,
+    name: `Talent Show Componenet`,
+    component: () => import(`../views/TalentShow.vue`),
+  },
   {
     path: `/:catchAll(.*)`,
     name: `404`,

From f053d89bc4548dc9239f416dd922fd1129ccb370 Mon Sep 17 00:00:00 2001
From: Ayush Tiwari <62030895+ayush2323@users.noreply.github.com>
Date: Sun, 24 Apr 2022 17:44:56 +0530
Subject: [PATCH 3/3] Create TalentShow.vue

---
 src/views/TalentShow.vue | 136 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 src/views/TalentShow.vue

diff --git a/src/views/TalentShow.vue b/src/views/TalentShow.vue
new file mode 100644
index 0000000..6171a93
--- /dev/null
+++ b/src/views/TalentShow.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="p-10">
+    <center>
+      <h1>{{ userName }}</h1>
+    </center>
+    <div class="vote-wrapper">
+      <span @click="upvote()" class="vote">
+        <img
+          src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS0cHyBIvLq-CLHFPY2ezYpBtsEj4eL93cs0M0xRgY4r_1Sgu8l"
+        />
+      </span>
+      <span class="vote-count">{{ count }}</span>
+      <span @click="downvote()" class="vote">
+        <img
+          src="https://target.scene7.com/is/image/Target/GUEST_dba0b06a-4aa4-4c91-a49b-74e7200202c4?wid=325&hei=325&qlt=80&fmt=pjpeg"
+        />
+      </span>
+    </div>
+    <h1>Video</h1>
+    <div class="wrapper">
+      <video
+        class="video"
+        v-for="(v, k) in videoList"
+        :key="k"
+        width="400"
+        height="350"
+        controls
+        preload
+      >
+        <source
+          v-for="(v, k) in videoList"
+          :key="k"
+          :src="v"
+          type="video/mp4"
+        />
+      </video>
+    </div>
+    <br /><br />
+
+    <h1>Audio</h1>
+    <div class="wrapper">
+      <audio class="audio" v-for="(a, k) in audioList" :key="k" controls>
+        <source
+          v-for="(a, k) in audioList"
+          :key="k"
+          :src="a"
+          type="audio/ogg"
+        />
+      </audio>
+    </div>
+    <br /><br />
+
+    <h1>Image</h1>
+    <div class="wrapper">
+      <img
+        v-for="(i, k) in imageList"
+        :key="k"
+        :src="i"
+        alt="video"
+        width="400"
+        height="350"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.vote {
+  height: 50px;
+  width: 40px;
+  padding: 2px 7px;
+  border-radius: 3px;
+  font-size: 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  color: #607d8b;
+  background: #f7f9fa;
+  -webkit-transition: color 0.3s, background-color 0.3s;
+  -o-transition: color 0.3s, background-color 0.3s;
+  transition: color 0.3s, background-color 0.3s;
+  cursor: pointer;
+}
+
+.vote-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.vote-count {
+  padding: 0 15px;
+}
+</style>
+
+<script>
+export default {
+  setup() {
+    const videoList = [`movie.mp4`, `movie2.mp4`, `movie3.mp4`];
+    const imageList = [
+      `https://image.shutterstock.com/image-vector/stem-science-technology-engineering-mathematics-260nw-1391360291.jpg`,
+      `https://image.shutterstock.com/image-vector/illustration-stem-science-technology-engineering-260nw-592087955.jpg`,
+      `https://image.shutterstock.com/image-vector/illustration-stem-science-technology-engineering-260nw-1415324810.jpg`,
+    ];
+    const audioList = [`audio.mp4`, `audio2.mp4`, `audio3.mp4`];
+    const userName = `nope`;
+    let count = 0;
+
+    function upvote() {
+      count++;
+    }
+
+    function downvote() {
+      count--;
+    }
+
+    return {
+      videoList,
+      imageList,
+      audioList,
+      userName,
+      count,
+      upvote,
+      downvote,
+    };
+  },
+};
+</script>