Merge pull request #706 from developerHet/fix-projects-search-icon-703

fix: search icon added in projects search bar
FrancescoXX · Mar 20, 2023 · 265864a · 265864a · vercel · Mar 20, 2023
2 parents df48445 + 608c163
commit 265864a
Show file tree

Hide file tree

Showing 2 changed files with 7,254 additions and 7,237 deletions.
diff --git a/src/components/GetProjects.js b/src/components/GetProjects.js
@@ -55,19 +55,34 @@ const GetProjects = () => {
           <div className="max-w-bodyContainer">
             <div className="mx-4 mt-5 mb-10 flex list-none flex-col items-center justify-center gap-[2rem] lg:flex-row lg:gap-[0.6rem]">
               <div className="py-2">
-                <Multiselect
-                  options={options}
-                  displayValue={"value"}
-                  selectedValues={options.selectedValues}
-                  onSelect={getSelectedValues}
-                  onRemove={getSelectedValues}
-                  placeholder="Filter By Tech Stack"
-                  ref={multiselectRef}
-                  className="bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl"
-                  showCheckbox={true}
-                  closeOnSelect={true}
-                  avoidHighlightFirstOption={true}
-                />
+                <div className="bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl flex items-center flex-row ">
+                  <Multiselect
+                    options={options}
+                    displayValue={"value"}
+                    selectedValues={options.selectedValues}
+                    onSelect={getSelectedValues}
+                    onRemove={getSelectedValues}
+                    placeholder="Filter By Tech Stack"
+                    ref={multiselectRef}
+                    showCheckbox={true}
+                    closeOnSelect={true}
+                    avoidHighlightFirstOption={true}
+                  />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5 rotate-90 text-white sm:text-slate-400"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="#000000"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
             <div className="my-[1rem] flex flex-wrap items-center justify-center gap-[1.5rem] pt-4 text-left md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
@@ -130,7 +145,8 @@ const GetProjects = () => {
                             project.live_link === ""
                               ? { pointerEvents: "none" }
                               : { pointerEvents: "auto" }
-                          } rel="noreferrer"
+                          }
+                          rel="noreferrer"
                         >
                           <svg
                             stroke="currentColor"
@@ -151,7 +167,8 @@ const GetProjects = () => {
                         <a
                           className="mr-3 flex items-center gap-2 rounded-full bg-[#111827] px-3 py-1.5 text-sm transition-all ease-in hover:bg-sky-700"
                           href={project.link}
-                          target="_blank" rel="noreferrer"
+                          target="_blank"
+                          rel="noreferrer"
                         >
                           <svg
                             stroke="currentColor"