added delete button to recent visited

src/views/Home.vue

@@ -5,9 +5,8 @@
       <h3 class="mb-lg-5">Open source CSGO data platform</h3>
     </div>
     <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
-      <div v-for="player in recentVisited" :key="player.steamid64" class="player-card"
+      <div v-for="(player, id) in recentVisited" :key="player.steamid64" class="player-card">
-           @click="GoToPlayer(player.steamid64)">
+        <div class="p-2" @click="GoToPlayer(player.vanity_url || player.steamid64)">
-        <div class="p-2">
           <div class="col-md-4 m-auto">
             <img :alt="player.name" :src="player.avatar">
           </div>
@@ -15,6 +14,7 @@
             <p>{{ player.name }}</p>
           </div>
         </div>
+        <i class="delete fas fa-times" @click="removeRecentVisited(id)"></i>
       </div>
     </div>
     <hr v-if="recentVisited !== null" class="m-auto text-muted">
@@ -41,22 +41,46 @@
 </template>
 
 <script>
-import {GoToPlayer} from "../utils";
+import {GoToPlayer, SaveLastVisitedToLocalStorage} from "../utils";
+import {onBeforeMount, ref} from "vue";
 
 export default {
   name: 'Home',
   setup() {
     document.title = 'Home | csgoWTF'
 
-    let recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
+    const recentVisited = ref([])
-    if (recentVisited !== null) {
+
-      recentVisited.reverse()
+    const loadRecentVisited = () => {
-      if (window.innerWidth < 768) {
+      recentVisited.value = JSON.parse(localStorage.getItem('recent-visited'))
-        recentVisited = recentVisited.filter(i => recentVisited.indexOf(i) < 6)
+
+      if (recentVisited.value !== null) {
+        recentVisited.value.reverse()
+        if (window.innerWidth < 768) {
+          recentVisited.value = recentVisited.value.filter(i => recentVisited.value.indexOf(i) < 6)
+        }
       }
     }
 
-    return {recentVisited, GoToPlayer}
+    const removeRecentVisited = (key) => {
+      if (recentVisited.value !== null) {
+        recentVisited.value.splice(key, 1)
+
+        localStorage.clear()
+
+        if (recentVisited.value !== []) {
+          recentVisited.value.map(p => {
+            SaveLastVisitedToLocalStorage(p)
+          })
+        }
+      }
+
+      loadRecentVisited()
+    }
+
+    onBeforeMount(() => loadRecentVisited())
+
+    return {recentVisited, GoToPlayer, removeRecentVisited}
   }
 }
 </script>
@@ -67,6 +91,7 @@ export default {
   font-size: 5rem;
   padding-bottom: 1.5rem;
 }
+
 .main-content {
   .head {
     background-image: url("../images/map_screenshots/default.jpg");
@@ -106,10 +131,27 @@ export default {
       height: 75px;
       background: var(--bs-blue);
       border-radius: 15% 5%;
+      position: relative;
+
+      .delete {
+        display: none;
+      }
 
       &:hover {
         background: var(--bs-primary);
         cursor: pointer;
+
+        .delete {
+          display: initial;
+          position: absolute;
+          font-size: 1rem;
+          top: 5px;
+          right: 5px;
+
+          &:hover {
+            color: maroon;
+          }
+        }
       }
 
       img {
@@ -131,6 +173,7 @@ export default {
     .recent-search {
       .player-card {
         height: 60px;
+
         img {
           width: 30px;
           height: 30px;
@@ -151,4 +194,4 @@ export default {
     }
   }
 }
-</style>
+</style>