Meilisearch Integrated

app/components/brandlogo.js

@@ -12,4 +12,4 @@ export default function BrandLogo(props) {
         />
     </>
   );
-}
+}

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

@@ -2,11 +2,9 @@ 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}/>;
@@ -17,4 +15,3 @@ function AllCards({ data,search }) {
 }
 
 export default AllCards;
-

app/pages/resources/index.js

@@ -1,7 +1,21 @@
-import AllCards from '../../components/filtered-search-bar/AllCards';
+import Card from '../../components/filtered-search-bar/Card';
 import Filter from '../../components/filtered-search-bar/Filter';
 import { useState, useEffect } from 'react';
 import Nav from '../../components/Hero/Nav';
+import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
+import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';
+import {motion} from "framer-motion"
+
+const searchClient = instantMeiliSearch(
+  process.env.MEILISEARCH_DEPLOYED,
+  process.env.MEILISEARCH_KEY
+)
+
+function Hit({ hit }) {
+  return (
+    <Card name={hit.name} info={hit.info} key={hit.id} value={hit.value}/>
+  );
+}
 
 export default function Home() {
   const [resource, setresource] = useState();
@@ -111,6 +125,7 @@ export default function Home() {
   const [trigger, setTrigger] = useState(true);
   const [searchParam] = useState(["name"]);
 
+
   function search(items) {
     return items?.filter((item) => {
       if (item.id > 7) {
@@ -131,7 +146,7 @@ export default function Home() {
           ALL RESOURCES
         </h1>
         <div className=" m-auto">
-          <div className="flex md:h-12 md:mb-[1.8rem] justify-center">
+          {/* <div className="flex md:h-12 md:mb-[1.8rem] justify-center">
             <input
               type="search"
               name="search-form"
@@ -144,7 +159,21 @@ export default function Home() {
                 setTrigger(true);
               }}
             />
-          </div>
+          </div> */}
+
+          <InstantSearch indexName="resources" searchClient={searchClient}>
+            <div className="">
+              <SearchBox classNames={{
+                root: "flex md:h-12 md:mb-[1.8rem] justify-center",
+                input: 'mt-5 ml-[2px] w-64  h-8 md:mt-9 pl-2 md:w-10/11 md:h-12 sm:w-6/12',
+              }}/>
+            </div>
+          <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">
+            <Hits hitComponent={Hit} className="flex sm:min-w-96  min-h-96 "/>
+          </motion.div>
+
+          </InstantSearch>
+
           <div className="sm:mt-9 flex flex-col ml-[3.8rem] sm:ml-[29.8rem]">
             <div className="mb-5">
               {trigger &&
@@ -165,18 +194,26 @@ export default function Home() {
                 })}
             </div>
           </div>
-          <div className="flex justify-center">
+          {/* <div className="flex justify-center">
             <Filter
               resources={resource}
               setFiltered={setFiltered}
               activeOption={activeOption}
               setActiveOption={setActiveOption}
             />
-          </div>
+          </div> */}
 
-          <div>
+          {/* <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">
+            .map((x) => {
+              if(x.id>7){
+                return <Card name={x.name} info={x.info} key={x.id} value={x.value}/>;
+              }
+            })}
+          </motion.div> */}
+
+          {/* <div>
             <AllCards data={filtered} search={search} />
-          </div>
+          </div> */}
         </div>
       </div>
     );

package.json

@@ -1,10 +1,12 @@
 {
   "dependencies": {
+    "@meilisearch/instant-meilisearch": "^0.10.1",
+    "instantsearch.js": "^4.49.3",
+    "react-instantsearch-dom": "^6.38.2",
     "react-tweet-embed": "^2.0.0",
     "react-twitter-embed": "^4.0.4",
     "react-twitter-widgets": "^1.11.0",
     "react-vertical-timeline-component": "^3.6.0",
     "rescript-react-tweet-embed": "^0.1.3"
   }
-
 }