create a responsive search bar component which renders search results based on filters and user typed data in the search bar

app/components/filtered-search-bar/AllCards.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Card from "./Card";
+import {motion} from "framer-motion"
+
+
+function AllCards({ data,search }) {
+  return (
+    <motion.div layout className="grid place-items-center grid-cols-1 gap-10 sm:grid-cols-2 xl:grid-cols-3 md:mt-10 md:pb-10">
+
+      {search(data)?.map((x) => {
+        if(x.id>7){
+          return <Card name={x.name} info={x.info} key={x.id} value={x.value}/>;
+        }
+      })}
+    </motion.div>
+  );
+}
+
+export default AllCards;
+

app/components/filtered-search-bar/Card.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+function Card({ name, value, info }) {
+  return (
+    <motion.div layout className="flex sm:min-w-96  min-h-96 ">
+      <div className="flex flex-col justify-around w-72 align-center max-w-sm sm:w-96 sm:h-96 p-6 text-white bg-[#1E1E1E] border border-gray-200 rounded-lg shadow-md sm:hover:scale-110 sm:mb-6">
+        <div>
+          <h5 className="flex text-center justify-center mb-2 text-2xl font-bold tracking-tight ">
+            {name}
+          </h5>
+
+          <p className="mb-20 mt-5  font-normal ">{info}</p>
+        </div>
+        <div className="flex justify-center">
+          {/* <a
+          href={value}
+          target="_blank"
+          className="inline-flex items-center p-8 h-10 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Read more
+        </a> */}
+          <a
+            href={value}
+            target="_blank"
+            className=" text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
+          >
+            Read more
+          </a>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default Card;

app/components/filtered-search-bar/Filter.js

@@ -0,0 +1,57 @@
+import { useEffect } from "react";
+import React from "react";
+
+function Filter({ resources, setActiveOption, setFiltered, activeOption }) {
+  useEffect(() => {
+    if (activeOption == "all") {
+      setFiltered(resources);
+      return;
+    }
+    const filtered = resources.filter((card) => card.genre === activeOption);
+    setFiltered(filtered);
+    // console.log(filtered);
+  }, [activeOption]);
+
+  return (
+    <div className="text-white flex mb-5 md:mt-16 align-center">
+      <h1 className="text-white text-lg ml-2 md:text-3xl md:mt-3 font-bold ">
+        Filter:
+      </h1>
+      <div className="flex flex-wrap flex-col sm:flex-row	">
+        <button
+          onClick={() => setActiveOption("all")}
+          className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 lg:ml-10 "
+        >
+          All
+        </button>
+        <button
+          onClick={() => setActiveOption("github")}
+          className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10"
+        >
+          Github repo
+        </button>
+        <button
+          onClick={() => setActiveOption("twitter")}
+          className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10"
+        >
+          Twitter
+        </button>
+        <button
+          onClick={() => setActiveOption("projects")}
+          className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10"
+        >
+          Projects
+        </button>
+        <button
+          onClick={() => setActiveOption("resources")}
+          className="bg-red px-8 md:px-14 md:py-3 border-2 ml-5 mb-2 sm:ml-10"
+        >
+          Resources
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Filter;
+

app/package.json

@@ -19,6 +19,7 @@
     "bootstrap": "^5.1.3",
     "dompurify": "^2.3.5",
     "emoji-toolkit": "^6.6.0",
+    "framer-motion": "^8.0.2",
     "gapi-cjs": "^1.0.3",
     "graphql": "^16.3.0",
     "ipfs-core": "^0.14.2",