Fix TODO's comments

src/assets/style/global.css

@@ -61,14 +61,6 @@ li:not(:last-child) {
   margin-bottom: var(--prj-spacing-1);
 }
 
-/* TODO: Move to where it belogns */
-th,
-td {
-  padding: 0.25rem 1rem;
-  border: 1px solid white;
-  text-align: center;
-}
-
 .btn {
   padding: var(--prj-spacing-1);
 }

src/components/Table/Filters/index.tsx

@@ -1,16 +1,16 @@
 import { HeaderType, type Filter, type Value } from '../types.ts';
 
 export { default as SelectFilter } from './SelectFilter.tsx';
-export { default as NumberInput } from './NumberInput.tsx';
+export { default as NumberFilter } from './NumberFilter.tsx';
-
-export type DataItem = Record<string, any>;
 
 const filterString = (value: Value, data: any): boolean => {
   return data.search(value) !== -1;
 };
 const filterNumber = (value: Value, data: any): boolean => {
   if (!Array.isArray(value)) {
-    return true;
+    throw new Error(
+      'Value should be an array in the form of [operator: string, value: number]',
+    );
   }
 
   const [operator, numberValue] = value;

src/components/Table/Table.module.css

@@ -0,0 +1,6 @@
+.table th,
+.table td {
+  padding: 0.25rem 1rem;
+  border: 1px solid white;
+  text-align: center;
+}

src/components/Table/Table.tsx

@@ -1,13 +1,9 @@
 import React, { useMemo, useRef, useState } from 'react';
 import usePagination, { Offset } from 'src/hooks/usePagination';
-import {
+import { SelectFilter, NumberFilter, resolveFilterByType } from './Filters';
-  SelectFilter,
+import type { DataItem, Header, Value, Filter } from './types';
-  NumberInput,
-  resolveFilterByType,
-  type Filter,
-} from './Filters';
-import type { DataItem, Header, Value } from './types';
 import { HeaderType } from './types';
+import styles from './Table.module.css';
 
 interface Props {
   data: DataItem[];
@@ -92,7 +88,14 @@ export default function Table({ data, headers }: Props): JSX.Element {
           />
         );
       case HeaderType.Number:
-        return <NumberInput {...baseProps} />;
+        return (
+          <NumberFilter
+            {...baseProps}
+            onChange={(value: [string, number | null]) => {
+              handleUpdateFilters(header.key, header.type, value as Value);
+            }}
+          />
+        );
       case HeaderType.Select:
         return <SelectFilter data={data} {...baseProps} />;
       case HeaderType.Multiple:
@@ -120,7 +123,7 @@ export default function Table({ data, headers }: Props): JSX.Element {
       </section>
 
       <section className="mt-1 overflow-scroll">
-        <table>
+        <table className={styles.table}>
           <thead>
             <tr>
               {headers.map((item, idx) => (

src/pages/games/index.astro

@@ -54,17 +54,4 @@ const headers: Header[] = [
   <section>
     <Table client:load data={games} headers={headers} />
   </section>
-
-  <section>
-    <ul>
-      {
-        games.map((item) => (
-          <li>
-            {/* <a href={`games/${item.slug}`}>{item.title}</a> */}
-            {item.title}
-          </li>
-        ))
-      }
-    </ul>
-  </section>
 </Layout>