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"
  }
-
 }