Add search options for blog list page

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

package.json

@@ -17,6 +17,7 @@
     "@nuxtjs/fontaine": "^0.2.5",
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.6.7",
+    "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/typography": "^0.5.9",
     "eslint": "^8.39.0",
     "nuxt": "^3.6.5",

pages/blogs/index.vue

@@ -3,6 +3,7 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({
 
 const elementPerPgae = ref(4)
 const pageNumber = ref(1)
+const searchTest = ref('')
 
 const formatedData = computed(() => {
   return data.value?.map((articles) => {
@@ -20,8 +21,17 @@ const formatedData = computed(() => {
   }) || []
 })
 
+const searchData = computed(() => {
+  return formatedData.value.filter((data) => {
+    const lowerTitle = data.title.toLocaleLowerCase()
+    if (lowerTitle.search(searchTest.value) !== -1)
+      return true
+    else return false
+  }) || []
+})
+
 const paginatedData = computed(() => {
-  return formatedData.value.filter((data, idx) => {
+  return searchData.value.filter((data, idx) => {
     const startInd = ((pageNumber.value - 1) * elementPerPgae.value)
     const endInd = (pageNumber.value * elementPerPgae.value) - 1
 
@@ -37,7 +47,7 @@ function onPreviousPageClick() {
 }
 
 const totalPage = computed(() => {
-  const ttlContent = formatedData.value.length || 0
+  const ttlContent = searchData.value.length || 0
   const totalPage = Math.ceil(ttlContent / elementPerPgae.value)
   return totalPage
 })
@@ -62,6 +72,16 @@ useHead({
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
+
+    <div class="px-3">
+      <input
+        v-model="searchTest"
+        placeholder="Search"
+        type="text"
+        class="block w-full  rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+      >
+    </div>
+
     <ClientOnly>
       <div v-auto-animate class="space-y-5 my-5">
         <template v-for="post in paginatedData" :key="post.title">

tailwind.config.js

@@ -10,5 +10,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
 }

yarn.lock

@@ -1175,6 +1175,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tailwindcss/forms@^0.5.4":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.4.tgz#5316a782fd95369eb5b6fd01d46323b3dce656a2"
+  integrity sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@tailwindcss/typography@^0.5.9":
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
@@ -5464,6 +5471,11 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"