diff --git a/src/assets/style/global.css b/src/assets/style/global.css index feaa63d..368214c 100644 --- a/src/assets/style/global.css +++ b/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); } diff --git a/src/components/Table/Filters/NumberInput.tsx b/src/components/Table/Filters/NumberFilter.tsx similarity index 100% rename from src/components/Table/Filters/NumberInput.tsx rename to src/components/Table/Filters/NumberFilter.tsx diff --git a/src/components/Table/Filters/index.tsx b/src/components/Table/Filters/index.tsx index d2b2743..5c9c2e1 100644 --- a/src/components/Table/Filters/index.tsx +++ b/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 type DataItem = Record; +export { default as NumberFilter } from './NumberFilter.tsx'; 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; diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css new file mode 100644 index 0000000..a093931 --- /dev/null +++ b/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; +} diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index f76a0ab..a4b75a5 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,13 +1,9 @@ import React, { useMemo, useRef, useState } from 'react'; import usePagination, { Offset } from 'src/hooks/usePagination'; -import { - SelectFilter, - NumberInput, - resolveFilterByType, - type Filter, -} from './Filters'; -import type { DataItem, Header, Value } from './types'; +import { SelectFilter, NumberFilter, resolveFilterByType } from './Filters'; +import type { DataItem, Header, Value, Filter } 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 ; + return ( + { + handleUpdateFilters(header.key, header.type, value as Value); + }} + /> + ); case HeaderType.Select: return ; case HeaderType.Multiple: @@ -120,7 +123,7 @@ export default function Table({ data, headers }: Props): JSX.Element {
- +
{headers.map((item, idx) => ( diff --git a/src/pages/games/index.astro b/src/pages/games/index.astro index 4d15d2b..47a27ad 100644 --- a/src/pages/games/index.astro +++ b/src/pages/games/index.astro @@ -54,17 +54,4 @@ const headers: Header[] = [
- -
-
    - { - games.map((item) => ( -
  • - {/* {item.title} */} - {item.title} -
  • - )) - } -
-