Update - Remove favourite gradients

assets/data/siteNavigation.js

@@ -1,22 +1,18 @@
 export const siteNavigation = [
   {
     name: 'generator',
-    title: 'Generator'
+    title: 'Generator',
   },
   {
     name: 'mesh',
-    title: 'Mesh'
+    title: 'Mesh',
   },
   {
     name: 'grainy',
-    title: 'Grainy'
-  },
-  {
-    name: 'favourite',
-    title: 'Favourite'
+    title: 'Grainy',
   },
   {
     name: 'flags',
-    title: 'Flags'
-  }
+    title: 'Flags',
+  },
 ]

components/GradientCard.vue

@@ -1,20 +1,11 @@
 <template>
   <article class="relative">
-    <button
-      aria-label="Save gradient to favourites"
-      class="absolute top-4 right-4 rounded-full bg-gray-800 p-2.5 transition-colors"
-      :class="favourite"
-      @click="saveGradient"
-    >
-      <icon-heart class="w-4 h-4" />
-    </button>
-
     <div ref="gradient" class="h-64 rounded-3xl" :class="gradient" />
 
     <div class="mx-1.5 -mt-6 rounded-3xl bg-gray-900 p-6 text-white">
-      <p class="font-black tracking-wide uppercase" v-text="name" />
+      <p class="font-black uppercase tracking-wide" v-text="name" />
 
-      <div class="flex items-center gap-4 mt-4">
+      <div class="mt-4 flex items-center gap-4">
         <generator-select
           :id="id"
           v-model="currentDirection"
@@ -56,7 +47,6 @@ export default {
     return {
       currentDirection: this.direction,
       copyCode: '',
-      isFavourite: false,
     }
   },
   computed: {
@@ -68,49 +58,9 @@ export default {
     directions() {
       return getDirections()
     },
-    favourite() {
-      return this.isFavourite ? 'text-rose-500' : 'text-white'
-    },
     id() {
       return `Direction${this.name.replace(' ', '')}`
     },
   },
-  mounted() {
-    this.isFavourite = this.checkFavourite()
-  },
-  methods: {
-    saveGradient() {
-      const gradients = JSON.parse(localStorage.getItem('gradients')) || []
-
-      const exists = gradients.find((gradient) => gradient.name === this.name)
-
-      if (exists) {
-        gradients.splice(gradients.indexOf(exists), 1)
-
-        this.isFavourite = false
-
-        this.$toast.success('Removed from Favourites')
-      } else {
-        gradients.push({
-          name: this.name,
-          colors: this.colors,
-          direction: this.currentDirection,
-        })
-
-        this.isFavourite = true
-
-        this.$toast.success('Added to Favourites')
-      }
-
-      localStorage.setItem('gradients', JSON.stringify(gradients))
-
-      this.$emit('update')
-    },
-    checkFavourite() {
-      const gradients = JSON.parse(localStorage.getItem('gradients')) || []
-
-      return gradients.find((gradient) => gradient.name === this.name)
-    },
-  },
 }
 </script>