Merge pull request #436 from inkerton/NewA

search Bar @9

src/appwrite/configAppwrite.js

@@ -126,6 +126,31 @@ export class Service {
     }
   }
 
+  async searchPosts(searchTerm) {
+    try {
+      console.log("Search Term:", searchTerm);
+      const queries = [
+        Query.search("title", searchTerm),  // Convert to lowercase for consistent searching
+        Query.search("content", searchTerm),
+        Query.search("tags", searchTerm),
+        Query.search("category", searchTerm),
+      ];
+
+      const response = await this.databases.listDocuments(
+        conf.appwriteDatabaseId,
+        conf.appwriteCollectionId,
+        queries
+      );
+
+      console.log("Search Results:", response);
+      return response;
+    } catch (error) {
+      console.log("Appwrite service :: searchPosts :: error", error);
+      return false;
+    }
+  }  
+
+
   async getCurrentUsersPosts(userId) {
     try {
       const queries = [Query.equal("userId", userId)];

src/componenets/SearchBar.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import service from "../appwrite/configAppwrite";
+
+
+function SearchBar() {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const handleSearchSubmit = async (e) => {
+    e.preventDefault(); 
+    try {
+      const response = await service.searchPosts(searchTerm); // Call searchPosts with searchTerm
+      console.log("Search Results:", response); 
+    } catch (error) {
+      console.error("Error during search:", error);
+    }
+  };
+
+  return (
+    <>
+
+      <div class="flex justify-center items-center lg:w-11/12 w-full rounded-lg">
+        <div class="flex relative rounded-md w-full px-4 max-w-xl">
+          <input
+            type="text"
+            name="q"
+            id="query"
+            placeholder="Tech, Health, etc"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full p-3 rounded-md placeholder-gray-500 dark:placeholder-gray-300 dark:text-black"
+            style={{
+              borderTop: "2px solid black",
+              borderLeft: "2px solid black",
+              borderBottom: "2px solid black",
+              borderRight: "none",
+            }}
+          />
+          <button
+            onClick={handleSearchSubmit}
+            class="inline-flex items-center gap-2 bg-violet-700 text-white text-lg font-semibold py-3 px-6 rounded-r-md"
+          >
+            <span>search</span>
+            <span class="hidden md:block">
+              <svg
+                class="text-gray-200 h-5 w-5 p-0 fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                version="1.1"
+                x="0px"
+                y="0px"
+                viewBox="0 0 56.966 56.966"
+                // style="enable-background:new 0 0 56.966 56.966;"
+                xml:space="preserve"
+                width="512px"
+                height="512px"
+              >
+                <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default SearchBar;

src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from '../../lib/utils';
+import { cn } from "../../lib/utils"
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

src/pages/AllPost.jsx

@@ -8,7 +8,8 @@ import {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "../components/ui/carousel"
+} from "../components/ui/carousel";
+import SearchBar from "../componenets/SearchBar";
 
 function AllPosts() {
   const [posts, setPosts] = useState([]);
@@ -48,6 +49,8 @@ function AllPosts() {
               Have a look at our Blog Posts.
             </p>
             {/* <hr className="mt-2" /> */}
+
+            <SearchBar/>
           </div>
 
           <div className="px-4 mb-4 w-full">
@@ -56,7 +59,7 @@ function AllPosts() {
                 <h2 class="flex flex-row flex-nowrap items-center mt-16 mb-16">
                   <span class="flex-grow block border-t border-black"></span>
                   <span class="flex-none block mx-4 px-4 py-2.5 text-xl rounded leading-none font-medium bg-black text-white">
-                  {category}
+                    {category}
                   </span>
                   <span class="flex-grow block border-t border-black"></span>
                 </h2>
@@ -148,4 +151,4 @@ function AllPosts() {
   );
 }
 
-export default AllPosts;
+export default AllPosts;