added searching

app/create-prompt/page.jsx

@@ -38,9 +38,7 @@ const CreatePrompt = () => {
             setSubmitting(false); //do this regardless of if the api call works
         }
     }
-
-
-
+
     return (
         <Form 
             type="Create"

app/profile/[id]/page.jsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+
+import Profile from "@components/Profile";
+
+const UserProfile = ({ params }) => {
+  const searchParams = useSearchParams();
+  const userName = searchParams.get("name");
+
+  const [userPosts, setUserPosts] = useState([]);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      const response = await fetch(`/api/users/${params?.id}/posts`);
+      const data = await response.json();
+
+      setUserPosts(data);
+    };
+
+    if (params?.id) fetchPosts();
+  }, [params.id]);
+
+  return (
+    <Profile
+      name={userName}
+      desc={`Welcome to ${userName}'s personalized profile page. Explore ${userName}'s prompts`}
+      data={userPosts}
+    />
+  );
+};
+
+export default UserProfile;

app/profile/loading.jsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+
+const Loading = () => {
+  return (
+    <div className='w-full flex-center'>
+      <Image
+        src='assets/icons/loader.svg'
+        width={50}
+        height={50}
+        alt='loader'
+        className='object-contain'
+      />
+    </div>
+  );
+};
+
+export default Loading;

components/Feed.jsx

@@ -19,43 +19,78 @@ const PromptCardList = ({ data, handleTagClick }) => {
 }
 
 const Feed = () => {
+  const [searchedResults, setSearchedResults] = useState([]);
+  const [searchTimeout, setSearchTimeout] = useState(null);
   const [searchText, setSearchText] = useState('');
-  const [posts, setPosts] = useState([]);
+  const [allPosts, setAllPosts] = useState([]);
 
-  const handleSearchChange = (e) => {
 
+  const handleTagClick = (tagName) => {
+    setSearchText(tagName);
+
+    const searchResult = filterPrompts(tagName);
+    setSearchedResults(searchResult);
   }
 
-  useEffect(() => {
-    const fetchPosts = async () => {
-      const response = await fetch('/api/prompt');
-      const data = await response.json();
 
-      setPosts(data);
-    }
+  const fetchPosts = async () => {
+    const response = await fetch('/api/prompt');
+    const data = await response.json();
 
+    setAllPosts(data);
+  }
+
+  useEffect(() => {
     fetchPosts();
   }, []);
 
+  const filterPrompts = (searchtext) => {
+    const regex = new RegExp(searchtext, "i"); // 'i' flag for case-insensitive search
+    return allPosts.filter(
+      (item) =>
+        regex.test(item.creator.username) ||
+        regex.test(item.tag) ||
+        regex.test(item.prompt)
+    );
+  };
+  const handleSearchChange = (e) => {
+    clearTimeout(searchTimeout);
+    setSearchText(e.target.value);
+
+    // debounce method
+    setSearchTimeout(
+      setTimeout(() => {
+        const searchResult = filterPrompts(e.target.value);
+        setSearchedResults(searchResult);
+      }, 500)
+    );
+  };
+
+
   return (
-    <section className="feed">
-      <form className="relative w-full flex-center"> 
-        <input 
-         type="text"
-         placeholder="Search for a tag or a username"
-         value={searchText}
-         onChange={handleSearchChange}
-         required
-         className="search_input peer"
+    <section className='feed'>
+      <form className='relative w-full flex-center'>
+        <input
+          type='text'
+          placeholder='Search for a tag or a username'
+          value={searchText}
+          onChange={handleSearchChange}
+          required
+          className='search_input peer'
         />
       </form>
 
-      <PromptCardList
-        data={posts}
-        handleTagClick={() => {}}
-      />
+      {/* All Prompts */}
+      {searchText ? (
+        <PromptCardList
+          data={searchedResults}
+          handleTagClick={handleTagClick}
+        />
+      ) : (
+        <PromptCardList data={allPosts} handleTagClick={handleTagClick} />
+      )}
     </section>
-  )
-}
+  );
+};
 
 export default Feed

components/PromptCard.jsx

@@ -19,6 +19,10 @@ const PromptCard = ({ post, handleTagClick, handleEdit, handleDelete }) => {
     setTimeout(() => setCopied(""), 3000);
   }
 
+  const handleClick = () => {
+    handleTagClick();
+  }
+
   return (
     <div className="prompt_card">
       <div className="flex justify-between items-start gap-5">