feat: search bar

src/components/SearchBar.tsx

@@ -1,7 +1,16 @@
-export const SearchBar = () => {
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const SearchBar = ({ value, onChange }: SearchBarProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
   return (
     <form>
-      <input type='text' placeholder='Search...' />
+      <input type='text' value={value} onChange={handleChange} placeholder='Search...' />
     </form>
   );
 };

src/components/Table.tsx

@@ -1,7 +1,10 @@
-import { useData } from '~/hooks';
+import { EcosystemChainData } from '~/types';
 
-export const Table = () => {
-  const { ecosystemData } = useData();
+interface TableProps {
+  chains: EcosystemChainData[];
+}
+
+export const Table = ({ chains }: TableProps) => {
   return (
     <table>
       <tr>
@@ -12,7 +15,7 @@ export const Table = () => {
         <th>Type</th>
       </tr>
 
-      {ecosystemData?.chains.map((data, index) => {
+      {chains?.map((data, index) => {
         return (
           <tr key={index}>
             <td>{data.name}</td>

src/components/index.ts

@@ -4,3 +4,4 @@ export * from './CustomHead';
 export * from './Table';
 export * from './SearchBar';
 export * from './TotalValueLocked';
+export * from './Title';

src/containers/Dashboard/index.tsx

@@ -1,14 +1,28 @@
-import { SearchBar, Table } from '~/components';
-import { Title } from '~/components/Title';
+import { useState } from 'react';
+import { SearchBar, Table, Title } from '~/components';
+import { useData } from '~/hooks';
 
 const Dashboard = () => {
+  const { ecosystemData } = useData();
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  const handleChange = (value: string) => {
+    setSearchTerm(value);
+  };
+
+  // Filter chains based on search term
+  const filteredChains = ecosystemData?.chains.filter((chain) =>
+    chain.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <section>
       <header>
         <Title title={'Chain list'} />
-        <SearchBar />
+        <SearchBar value={searchTerm} onChange={handleChange} />
       </header>
-      <Table />
+
+      <Table chains={filteredChains} />
     </section>
   );
 };