From 99ac76ff1f3032f0e589b6405ed7a52d573df9b0 Mon Sep 17 00:00:00 2001
From: titix <titi@defi.sucks>
Date: Wed, 17 Jul 2024 12:00:05 -0300
Subject: [PATCH 1/2] feat: search bar

---
 src/components/SearchBar.tsx       | 13 +++++++++++--
 src/components/Table.tsx           | 11 +++++++----
 src/components/index.ts            |  1 +
 src/containers/Dashboard/index.tsx | 22 ++++++++++++++++++----
 4 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index cd1018e..94fb92a 100644
--- a/src/components/SearchBar.tsx
+++ b/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>
   );
 };
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 377796c..348c80f 100644
--- a/src/components/Table.tsx
+++ b/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>
diff --git a/src/components/index.ts b/src/components/index.ts
index c99907e..35ed63f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,3 +4,4 @@ export * from './CustomHead';
 export * from './Table';
 export * from './SearchBar';
 export * from './TotalValueLocked';
+export * from './Title';
diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx
index 113a271..e8abe4b 100644
--- a/src/containers/Dashboard/index.tsx
+++ b/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>
   );
 };

From e855fcb7a8f889fa2f56878746f9d688900a7458 Mon Sep 17 00:00:00 2001
From: titix <titi@defi.sucks>
Date: Wed, 17 Jul 2024 15:50:41 -0300
Subject: [PATCH 2/2] fix: resolve dashboard export

---
 src/containers/Dashboard/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx
index 6548cc7..e968b94 100644
--- a/src/containers/Dashboard/index.tsx
+++ b/src/containers/Dashboard/index.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { SearchBar, Table, Title } from '~/components';
 import { useData } from '~/hooks';
 
-const Dashboard = () => {
+export const Dashboard = () => {
   const { ecosystemData } = useData();
   const [searchTerm, setSearchTerm] = useState<string>('');