💻 | Update all components with Composition API and TypeScript & Add images

src/components/Post.vue

@@ -0,0 +1,106 @@
+<template>
+  <article
+    class="post border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
+    :style="{ backgroundImage: `url(${getBackGroundCover})` }"
+  >
+    <div>
+      <p
+        class="text-2xl md:text-3xl font-bold md:text-justify leading-7 mb-3"
+        :class="lightBg ? 'text-black':'text-white'"
+      >{{ title }}</p>
+      <p
+        class="text-lg italic text-justify leading-5"
+        :class="lightBg ? 'text-gray-900':'text-dark-100'"
+      >{{ description }}</p>
+    </div>
+    <div
+      class="flex justify-between mt-8 items-end"
+      :class="lightBg ? 'text-gray-900':'text-dark-100'"
+    >
+      <div>
+        <div>{{getDate}}</div>
+        <div>{{reading_time}} min</div>
+      </div>
+      <div class="self-end flex flex-wrap flex-col md:flex-row">
+        <div v-for="tag in tags"
+             class="my-1 md:my-0 ml-2 py-1 px-2 rounded font-semibold"
+             :class="lightBg ? 'bg-black text-white':'bg-white text-black'"
+        >
+          #{{ $t(tag) }}
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script lang="ts">
+import {computed, useContext} from "@nuxtjs/composition-api";
+
+interface PostProps {
+  title: string,
+  description: string,
+  reading_time: number,
+  date: string,
+  tags: [],
+  cover: string,
+  background_is_light: boolean
+}
+
+export default {
+  name: "Post",
+  props: {
+    title: {
+      type: String,
+      default: "New Post's title "
+    },
+    description: {
+      type: String,
+      default: "New Post's description"
+    },
+    reading_time: {
+      type: Number,
+      default: 0
+    },
+    date: {
+      type: String,
+      default: "Today"
+    },
+    tags: {
+      type: Array,
+      default: () => ["Tag1", "Tag2", "Tag3"],
+    },
+    cover: {
+      type: String,
+      default: "default.png"
+    },
+    lightBg: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props: PostProps) {
+    const {$i18n} = useContext()
+
+    const getDate = computed(() => {
+      const dateFormat = props.date.split('-')
+      return dateFormat[0] + " " + $i18n.t('month.' + dateFormat[1]) + " " + dateFormat[2]
+    })
+
+    const getBackGroundCover = computed(() => require(`~/assets/images/posts/${props.cover}.png`))
+
+    return {
+      getDate,
+      getBackGroundCover
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.h-blog {
+  min-height: 20rem;
+  background-position: center;
+  background-size: cover;
+  @apply bg-opacity-50;
+}
+</style>