use useState composable

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/ArchiveCardLoader.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { ContentLoader } from "vue-content-loader";
-</script>
-
-<template>
-  <div
-    class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
-  >
-    <content-loader
-      viewBox="0 0 476 45"
-      :speed="2"
-      primaryColor="#f3f3f3"
-      secondaryColor="#ecebeb"
-    >
-      <rect x="9" y="6" rx="0" ry="0" width="38" height="34" />
-      <rect x="58" y="6" rx="0" ry="0" width="369" height="9" />
-      <rect x="71" y="29" rx="0" ry="0" width="113" height="9" />
-      <rect x="191" y="28" rx="0" ry="0" width="113" height="9" />
-    </content-loader>
-  </div>
-</template>

components/ListHero.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
 const route = useRoute();
 
 const routeType = computed(() => {
   return route.params.topic || "";
 });
-const { data } = await useLazyAsyncData("listhero", () =>
-  queryContent(`/${routeType.value}`).find()
-);
+const data = useState("blogData");
 
 const typeName = computed(() => {
-  return data.value?.at(0)?.type || "";
+  const allpost = (data.value as Array<ParsedContent>) || [];
+  const filteredType = allpost.filter((post) => post._dir === routeType.value);
+  return filteredType.at(0)?.type || "";
 });
 
 const title = computed(() => {

components/TopicCard.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 const props = defineProps({
   title: String,
+  dir: String,
 });
 
 const router = useRouter();
 
 const onClick = () => {
-  router.push(`/tags/${props.title?.toLocaleLowerCase()}`);
+  router.push(`/tags/${props.dir}`);
 };
 </script>