feat: search input

src/context/SearchContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface SearchContextType {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export const SearchProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    <SearchContext.Provider value={{ searchValue, setSearchValue }}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+export const useSearch = () => {
+  const context = useContext(SearchContext);
+  if (context === undefined) {
+    throw new Error('useSearch must be used within a SearchProvider');
+  }
+  return context;
+}; 

src/pages/Home/ConnectWallet.tsx

@@ -3,19 +3,25 @@ import { saltplaer } from "../../constant"
 import { getEllipsisAddress } from "../../utils/formatAddress"
 import SearchIcon from "./assets/searchIcon.svg?react"
 import WalletIcon from "./assets/wallet-icon.svg?react"
+import { useSearch } from "../../context/SearchContext"
 
 export default function ConnectWallet() {
   const { connect } = useConnect()
   const { isConnected, data: accountData } = useAccount()
   const { disconnect } = useDisconnect()
+  const { searchValue, setSearchValue } = useSearch()
+
+
   return (
     <div className="absolute bottom-[0px] flex w-full items-center justify-center gap-4 border-t border-solid border-[#D6d6d6] bg-[#D90368] px-[7%] py-[32px]">
       <div className="flex flex-1 items-center gap-2">
         <SearchIcon />
         <input
+          value={searchValue}
           className="ml-[32px] w-full bg-transparent text-[32px] uppercase text-white outline-none placeholder:text-white"
           type="text"
           placeholder="Type token symbol, address to find your launchpad..."
+          onChange={(e) => setSearchValue(e.target.value)}
         />
       </div>
       <div className="rounded-[73px] border-4 border-solid border-[#FFCA05] bg-[#C5005D] p-[32px] text-[32px] font-bold leading-[100%] text-[#FFCA05]">

src/pages/Home/ListContentView/index.tsx

@@ -15,6 +15,7 @@ import { formatDate, formatTime } from "../../../utils/date"
 import { getEllipsisAddress } from "../../../utils/formatAddress"
 import { formatUnits } from "../../../utils/number"
 import { TokenPrice } from "../../Detail"
+import { useSearch } from '../../../context/SearchContext';
 
 
 interface ListContentProps {
@@ -57,6 +58,13 @@ const ListItem: React.FC<{ item: CombineTokenData }> = ({ item }) => {
 }
 
 const ListContent: React.FC<ListContentProps> = ({ items }) => {
+    const { searchValue } = useSearch();
+    
+    const filteredItems = items.filter(item => 
+        item.address.toLowerCase().includes(searchValue.toLowerCase()) ||
+        item.name.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
     return (
         <div className="mx-auto bg-[#FFCA05] px-4 py-8 pt-[124px]">
             <div className="flex items-center justify-center gap-4 relative mb-[84px]">
@@ -64,7 +72,7 @@ const ListContent: React.FC<ListContentProps> = ({ items }) => {
                 <img className="w-[125px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" src={coin} alt="coin" />
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-[1680px] mx-auto">
-                {items.map((item, idx) => (
+                {filteredItems.map((item, idx) => (
                     <ListItem
                         key={idx}
                         item={item}
@@ -72,7 +80,7 @@ const ListContent: React.FC<ListContentProps> = ({ items }) => {
                 ))}
 
             </div>
-            {items.length === 0 && <p className="text-gray-600 my-24 text-center text-2xl">No tokens found</p>}
+            {filteredItems.length === 0 && <p className="text-gray-600 my-24 text-center text-2xl">No tokens found</p>}
             <div className="flex items-center justify-center gap-4 h-[159px] mt-[120px]">
                 <LeftArrow />
                 <div className="flex items-center justify-center gap-4 relative">

src/pages/Home/index.tsx

@@ -1,3 +1,4 @@
+import { SearchProvider } from "../../context/SearchContext"
 import { Footer } from "../../components/footer"
 import { Banner } from "./Banner"
 import { WireKingHillView } from "./KingHillView"
@@ -5,11 +6,11 @@ import { WireListContent } from "./ListContentView"
 
 export const HomePage = () => {
   return (
-    <div>
+    <SearchProvider>
       <Banner />
       <WireListContent />
       <WireKingHillView />
       <Footer />
-    </div>
+    </SearchProvider>
   )
 }