Implement color

src/components/Post.vue

@@ -21,7 +21,7 @@ interface PostProps {
   slug: string,
   tags: Array<string>,
   reading_time: number,
-  id: number
+  color: string
 }
 
 export default defineComponent({
@@ -55,9 +55,9 @@ export default defineComponent({
       type: Number,
       default: 0
     },
-    id: {
+    color: {
-      type: Number,
+      type: String,
-      default: 0
+      default: 'blue'
     }
   },
   setup(props: PostProps) {
@@ -68,13 +68,17 @@ export default defineComponent({
     })
 
     const getHoverColor = computed(() => {
-      switch (props.id) {
+      switch (props.color) {
-        case 0:
+        case 'blue':
           return 'group-hover:text-blue-400'
-        case 1:
+        case 'red':
           return 'group-hover:text-red-400'
-        case 2:
+        case 'green':
           return 'group-hover:text-green-400'
+        case 'yellow':
+          return 'group-hover:text-yellow-400'
+        case 'purple':
+          return 'group-hover:text-purple-400'
         default:
           return 'group-hover:text-blue-400'
       }

src/components/PostsHome.vue

@@ -11,9 +11,9 @@
       </div>
       <div class="w-full lg:w-1/2 mt-20 grid grid-cols-1 gap-y-24 mb-8 sm:mb-24 text-left">
         <Post
-          v-for="(post, index) in posts"
+          v-for="post in posts"
           :key="post.slug"
-          :id="index"
+          :color="post.color.name"
           :title="post.title.code"
           :cover="post.cover.file_name"
           :description="post.description.code"

src/pages/blog/index.vue

@@ -8,9 +8,9 @@
     <div class="flex justify-center" v-else>
       <div class="w-full lg:w-1/2 mt-20 grid grid-cols-1 gap-y-24 mb-8 sm:mb-24 text-left">
         <Post
-          v-for="(post, index) in posts"
+          v-for="post in posts"
           :key="post.slug"
-          :id="index"
+          :color="post.color.name"
           :title="post.title.code"
           :cover="post.cover.file_name"
           :description="post.description.code"