Update nuxt to version 4 (#92)

* Nuxt 3.17.4 and other dependencies updated

* Temporary fix (maybe) of the Inline Code

* Update nuxt to version 4

app/components/category/card.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  count: number
+}
+
+withDefaults(defineProps<Props>(), {
+  title: 'No title available',
+  count: 0,
+})
+
+// some random color for tags
+const color = [
+  '#dc2626',
+  '#d97706',
+  '#65a30d',
+  '#059669',
+  '#0891b2',
+  '#0284c7',
+  '#4f46e5',
+  '#7c3aed',
+  '#c026d3',
+  '#db2777',
+]
+
+// get a random number
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
+</script>
+
+<template>
+  <div
+    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500"
+  >
+    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
+      <h1>#{{ title }}({{ count }})</h1>
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.rand-bg-color {
+  background-color: v-bind(picAColor);
+}
+</style>

app/components/category/hero.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { categoryPage } from '~/data'
+</script>
+
+<template>
+  <div class="container mx-auto">
+    <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
+      <div class="px-6">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
+          {{ categoryPage.title }}
+        </h1>
+        <p class="dark:text-zinc-300">
+          {{ categoryPage.description }}
+        </p>
+      </div>
+      <div class="px-6 justify-self-center">
+        <LogoDogs />
+      </div>
+    </div>
+  </div>
+</template>

app/components/category/topic.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { makeFirstCharUpper } from '@/utils/helper'
+
+const route = useRoute()
+
+// take category from route params & make first char upper
+const category = computed(() => {
+  const name = route.params.category || ''
+  let strName = ''
+
+  if (Array.isArray(name)) strName = name.at(0) || ''
+  else strName = name
+  return makeFirstCharUpper(strName)
+})
+</script>
+
+<template>
+  <div class="container mx-auto">
+    <div class="p-6 my-4 mx-2 rounded-md bg-gray-200 dark:bg-slate-900">
+      <h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
+        #{{ category }}
+      </h1>
+    </div>
+  </div>
+</template>