added search functionality

growthepie · Jan 15, 2025 · 9fcaf03 · 9fcaf03
1 parent 215cf3c
commit 9fcaf03
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 22 deletions.
diff --git a/app/(icons)/icons/FloatingBar.tsx b/app/(icons)/icons/FloatingBar.tsx
@@ -4,7 +4,18 @@ import { useState } from "react";
 import { GTPIcon } from "@/components/layout/GTPIcon";
 import { GTPIconName } from "@/icons/gtp-icon-names";
 
-export default function FloatingBar({}) {
+// Accept searchQuery, setSearchQuery, and iconsCount from props
+interface FloatingBarProps {
+  searchQuery: string;
+  setSearchQuery: (value: string) => void;
+  iconsCount: number;
+}
+
+export default function FloatingBar({
+  searchQuery,
+  setSearchQuery,
+  iconsCount,
+}: FloatingBarProps) {
   const [selectedFormat, setSelectedFormat] = useState<"SVG" | "PNG" | null>(null);
 
   return (
@@ -88,9 +99,12 @@ export default function FloatingBar({}) {
 
       {/* Search Bar */}
       <div className="flex-1">
-        <Search />
+        <Search 
+          query={searchQuery} 
+          setQuery={setSearchQuery} 
+          iconsCount={iconsCount}
+        />
       </div>
-
     </div>
   );
 }
diff --git a/app/(icons)/icons/Footer.tsx b/app/(icons)/icons/Footer.tsx
@@ -74,14 +74,18 @@ export default function Footer({ }) {
           </div>
 
           {/* Right Side Share Button */}
-          <div className="h-14 p-1 bg-[#33413f] rounded-[40px] flex items-center gap-4">
+          <div className="relative h-14 p-1 bg-[#33413f] rounded-[40px] flex items-center gap-4">
+            <div className="absolute inset-0 z-40 w-full h-full overflow-hidden pointer-events-none rounded-full">
+              <div className="w-full h-full"></div>
+              <div className="absolute top-1/2 -translate-y-1/2 w-full h-1 bg-gradient-to-r from-transparent via-white to-transparent opacity-60 transform -skew-x-20 animate-glint blur-sm"></div>
+            </div>
             <div className="h-11 px-[15px] py-2.5 bg-[#1f2726] rounded-[40px] flex justify-start items-start gap-2.5">
-                <div className="self-stretch justify-start items-center gap-2.5 inline-flex">
-                    <GTPIcon
-                        icon="gtp-share-monochrome"
-                        size="sm"
-                        className="w-6 h-6 relative"
-                    />
+              <div className="self-stretch justify-start items-center gap-2.5 inline-flex">
+                <GTPIcon
+                  icon="gtp-share-monochrome"
+                  size="sm"
+                  className="w-6 h-6 relative"
+                />
                 <div className="text-[#cdd8d3] text-[16px] font-['Raleway'] leading-[19.2px] text-left">
                   Share
                 </div>

diff --git a/app/(icons)/icons/Header.tsx b/app/(icons)/icons/Header.tsx
@@ -5,7 +5,18 @@ import { useUIContext } from "@/contexts/UIContext";
 import FloatingBar from "./FloatingBar";
 import { LogoIcon } from "./Icons";
 
-export default function Header({}) {
+// Add optional props for search query & icons count
+interface HeaderProps {
+  searchQuery?: string;
+  setSearchQuery?: (value: string) => void;
+  iconsCount?: number;
+}
+
+export default function Header({
+  searchQuery = "",
+  setSearchQuery = () => {},
+  iconsCount = 0,
+}: HeaderProps) {
   const { isMobile } = useUIContext();
   return (
     <div className="fixed flex flex-col w-full z-50 items-center">
@@ -43,7 +54,11 @@ export default function Header({}) {
       </header>
       <IconsContainer className={`absolute top-[76px] w-full`}>
         {!isMobile && (
-          <FloatingBar/>
+          <FloatingBar
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            iconsCount={iconsCount}
+          />
         )}
       </IconsContainer>
     </div>

diff --git a/app/(icons)/icons/Search.tsx b/app/(icons)/icons/Search.tsx
@@ -1,17 +1,17 @@
 "use client";
 
-import { useState } from "react";
-
 import { GTPIcon } from "@/components/layout/GTPIcon";
 import { GTPIconName } from "@/icons/gtp-icon-names";
 import { CloseIcon } from "./Icons";
 
-export default function Search() {
-  const [query, setQuery] = useState("");
-
-  // Example count of icons
-  const iconsCount = 89;
+// Receive everything via props: query, setQuery, iconsCount
+interface SearchProps {
+  query: string;
+  setQuery: (value: string) => void;
+  iconsCount: number;
+}
 
+export default function Search({ query, setQuery, iconsCount }: SearchProps) {
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setQuery(e.target.value);
   };

diff --git a/app/(icons)/icons/page.tsx b/app/(icons)/icons/page.tsx
@@ -1,15 +1,29 @@
 "use client";
 
+import { useState } from "react";
 import Header from "../../(icons)/icons/Header";
 import Footer from "../../(icons)/icons/Footer";
 import { GTPIcon } from "@/components/layout/GTPIcon";
 import { iconNames, GTPIconName } from "@/icons/gtp-icon-names";
 
 const IconsPage = () => {
+  // 1) Lifted search state
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // 2) Filter icon list based on user input
+  const filteredIcons = iconNames.filter((iconName) =>
+    iconName.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
   return (
     <div className="flex flex-col h-screen">
       {/* Header*/}
-      <Header/>
+      {/* Pass query-related props and count of filtered icons */}
+      <Header
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        iconsCount={filteredIcons.length}
+      />
 
       {/* Scrollable Container*/}
       <main
@@ -37,7 +51,7 @@ const IconsPage = () => {
             </h1>
           </div>
 
-          {/* Icon Cards */}
+          {/* Icon Cards - only show filtered icons */}
           <div
             className="
               w-full
@@ -47,7 +61,7 @@ const IconsPage = () => {
               mx-auto
             "
           >
-            {iconNames.map((iconName) => (
+            {filteredIcons.map((iconName) => (
               <IconCard iconName={iconName as GTPIconName} key={iconName} />
             ))}
           </div>