Merge branch 'dev' into feat/i18n

src/components/SearchBar.tsx

@@ -1,11 +1,20 @@
 import { useTranslation } from 'next-i18next';
 
-export const SearchBar = () => {
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const SearchBar = ({ value, onChange }: SearchBarProps) => {
   const { t } = useTranslation();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
 
   return (
     <form>
-      <input type='text' placeholder={t('HOME.DASHBOARD.search')} />
+      <input type='text' value={value} onChange={handleChange} placeholder={t('HOME.DASHBOARD.search')} />
     </form>
   );
 };

src/components/Table.tsx

@@ -1,10 +1,13 @@
 import { useTranslation } from 'next-i18next';
 
-import { useData } from '~/hooks';
+import { EcosystemChainData } from '~/types';
 
-export const Table = () => {
+interface TableProps {
+  chains: EcosystemChainData[];
+}
+
+export const Table = ({ chains }: TableProps) => {
   const { t } = useTranslation();
-  const { ecosystemData } = useData();
 
   return (
     <table>
@@ -16,7 +19,7 @@ export const Table = () => {
         <th>{t('HOME.DASHBOARD.type')}</th>
       </tr>
 
-      {ecosystemData?.chains.map((data, index) => {
+      {chains?.map((data, index) => {
         return (
           <tr key={index}>
             <td>{data.name}</td>

src/containers/Dashboard/index.tsx

@@ -1,17 +1,31 @@
 import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
 
 import { SearchBar, Table, Title } from '~/components';
+import { useData } from '~/hooks';
 
 export const Dashboard = () => {
   const { t } = useTranslation();
+  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={t('HOME.DASHBOARD.title')} />
-        <SearchBar />
+        <SearchBar value={searchTerm} onChange={handleChange} />
       </header>
-      <Table />
+
+      <Table chains={filteredChains} />
     </section>
   );
 };