Merge pull request #83 from 0xChijioke/filter0.1

filter step 0.1
BuidlGuidl · Apr 9, 2024 · 6ac99a8 · 6ac99a8
2 parents f16acc9 + f150a9d
commit 6ac99a8
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 8 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -93,7 +93,7 @@ const Home: NextPage = () => {
             </button>
             <button className={`py-3 text-customGray rounded-xl text-center w-full bg-[#f2f4f9]`}>Lists</button>
           </div>
-          <SearchBar />
+          <SearchBar placeholder="Search Impact Vectors" />
           <ImpactVectorDisplay />
         </div>
       </div>

diff --git a/packages/nextjs/components/impact-vector/FilterModal.tsx b/packages/nextjs/components/impact-vector/FilterModal.tsx
@@ -0,0 +1,55 @@
+import { useRef } from "react";
+import { SearchBar } from "./SearchBar";
+import { FunnelIcon } from "@heroicons/react/24/outline";
+
+const FilterModal = () => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+
+  const openModal = () => {
+    modalRef.current?.showModal();
+  };
+  const closeModal = () => {
+    modalRef.current?.close();
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {
+    if (e.key === "Escape") {
+      closeModal();
+    }
+  };
+
+  const handleOutsideClick: React.MouseEventHandler<HTMLDialogElement> = e => {
+    if (e.target === modalRef.current) {
+      closeModal();
+    }
+  };
+
+  return (
+    <>
+      <div onKeyDown={handleKeyDown} className="lg:mr-5 flex justify-end">
+        <button
+          onClick={openModal}
+          className="btn items-center btn-sm rounded-md border-opacity-20 outline-none font-light border-stone-500"
+        >
+          <span className="flex-row flex items-center whitespace-nowrap justify-center gap-x-1 text-sm">
+            <FunnelIcon className="w-5 h-4" />
+            Set filter
+          </span>
+          <span className="badge badge-xs rounded-[0.3rem] bg-slate-500 text-xs text-white p-1 py-2 h-[0.01rem]">
+            0
+          </span>
+        </button>
+      </div>
+
+      <dialog role="dialog" ref={modalRef} className="modal" onClick={handleOutsideClick}>
+        <div className="modal-box min-h-[300px] relative">
+          <SearchBar placeholder="Search filters or presets" />
+
+          <div className="modal-action"></div>
+        </div>
+      </dialog>
+    </>
+  );
+};
+
+export default FilterModal;
diff --git a/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx b/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx
@@ -80,7 +80,7 @@ const ImpactVectorCard = ({ name, description, sourceName }: Vector) => {
       <p className=" text-base-content-100  m-0">@{sourceName}</p>
 
       <>
-        <dialog ref={modalRef} onKeyDown={handleKeyDown} className="modal">
+        <dialog role="dialog" ref={modalRef} onKeyDown={handleKeyDown} className="modal">
           <div className="modal-box">
             <h3 className="font-bold text-lg">{name}</h3>
             <p className="py-2 text-base">{description}</p>

diff --git a/packages/nextjs/components/impact-vector/SearchBar.tsx b/packages/nextjs/components/impact-vector/SearchBar.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 
-export const SearchBar = () => {
+export const SearchBar = ({ placeholder }: { placeholder: string }) => {
   return (
     <div className="relative">
       <input
         className="input input-info input-bordered bg-secondary focus:outline-none border pl-10 border-neutral hover:border-gray-400  rounded-xl w-full p-3 text-neutral-500 leading-tight  "
         id="username"
         type="text"
-        placeholder="Search Impact Vectors"
+        placeholder={placeholder}
       />
 
       <div className="absolute left-0 inset-y-0 flex items-center">

diff --git a/packages/nextjs/components/impact-vector/table-components/ImpactTableHeader.tsx b/packages/nextjs/components/impact-vector/table-components/ImpactTableHeader.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import FilterModal from "../FilterModal";
 import { IoArrowDownSharp } from "react-icons/io5";
 import { IoArrowUpSharp } from "react-icons/io5";
 import { SelectedVector } from "~~/app/types/data";
@@ -19,7 +20,7 @@ const ImpactTableHeader = ({ sortDesc, setSortDesc, sortBy, setSortBy }: Props)
   return (
     <>
       <tr>
-        <th scope="col" className=" pb-3  w-[20%]  text-start text-xs font-medium  ">
+        <th scope="col" className="pb-1 w-[20%] text-start text-xs font-medium">
           <div className="flex items-center gap-1">
             <span className="cursor-pointer" onClick={getClickHandler("name")}>
               Impact Vector
@@ -28,15 +29,17 @@ const ImpactTableHeader = ({ sortDesc, setSortDesc, sortBy, setSortBy }: Props)
           </div>
         </th>
 
-        <th scope="col" className=" px-3 lg:px-6  pb-3 w-[75%]  text-start text-xs font-medium  ">
+        <th scope="col" className="px-3 lg:px-6 pb-1 w-[75%] text-start text-xs font-medium">
           <div className="flex items-center gap-1">
             <span className="cursor-pointer" onClick={getClickHandler("weight")}>
               Weight
             </span>
             {sortBy === "weight" && (sortDesc ? <IoArrowDownSharp /> : <IoArrowUpSharp />)}
           </div>
         </th>
-        <th scope="col" className="pl-6 py-3 w-[10%]  text-start  text-xs font-medium  "></th>
+        <th className="pb-1">
+          <FilterModal />
+        </th>
       </tr>
     </>
   );

diff --git a/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx b/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx
@@ -32,7 +32,7 @@ const ImpactTableRow = ({ vector, updateWeight }: Props) => {
         </div>
       </td>
       <td className="px-3 lg:px-6 py-2 sm:py-4 whitespace-nowrap text-sm ">
-        <div className="flex items-center justify-center gap-2">
+        <div className="flex items-center -mr-20 justify-center gap-2">
           <input
             type="range"
             min={0}