pools table sorting

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.14",
     "@hookform/resolvers": "^3.1.0",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",

src/components/Detail/Profile.tsx

@@ -1,5 +1,4 @@
 // import User from '~/assets/img/user_large.png'
-import Edit from '~/assets/img/edit.png'
 import Star from '~/assets/img/Star.png'
 import ModeItem_1 from '~/assets/icons/1.svg'
 import SideBar  from './SideBar'
@@ -9,57 +8,61 @@ import { useAuth } from '~/providers/AuthProvider';
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+type ChessResult = 'WIN' | 'LOST';
+type ChessType = {
+    category: string;
+    time: number;
+}
 interface History {
-    type: React.ReactElement;
-    result: React.ReactElement;
-    opponent: React.ReactElement;
-    wager: React.ReactElement;
-    edit?: React.ReactElement; // optional, same as string | undefined
+    type: ChessType;
+    result: ChessResult;
+    opponent: string;
+    wager: number;
+    edit?: string; // optional, same as string | undefined
 }
 const data: History[] = [
-{
-    type: <div className='flex items-center gap-2'><Image source={ModeItem_1}/><div className='flex flex-col'><p className='font-bold'>Standard</p><p>10 min</p></div></div>,
-    result: <h1>WIN</h1>,
-    opponent:<h1>Olivia Rhye</h1>,
-    wager: <h1>$100.00</h1>,
-    edit: <Image source={Edit}/> 
-}, 
-{
-    type: <div className='flex items-center gap-2'><Image source={ModeItem_1}/><div className='flex flex-col'><p className='font-bold'>Standard</p><p>10 min</p></div></div>,
-    result: <h1>WIN</h1>,
-    opponent:<h1>Olivia Rhye</h1>,
-    wager: <h1>$100.00</h1>,
-    edit: <Image source={Edit}/> 
-}, 
-{
-    type: <div className='flex items-center gap-2'><Image source={ModeItem_1}/><div className='flex flex-col'><p className='font-bold'>Standard</p><p>10 min</p></div></div>,
-    result: <h1>WIN</h1>,
-    opponent:<h1>Olivia Rhye</h1>,
-    wager: <h1>$100.00</h1>,
-    edit: <Image source={Edit}/> 
-}, 
-{
-    type: <div className='flex items-center gap-2'><Image source={ModeItem_1}/><div className='flex flex-col'><p className='font-bold'>Standard</p><p>10 min</p></div></div>,
-    result: <h1>WIN</h1>,
-    opponent:<h1>Olivia Rhye</h1>,
-    wager: <h1>$100.00</h1>,
-    edit: <Image source={Edit}/> 
-}, 
-{
-    type: <div className='flex items-center gap-2'><Image source={ModeItem_1}/><div className='flex flex-col'><p className='font-bold'>Standard</p><p>10 min</p></div></div>,
-    result: <h1>WIN</h1>,
-    opponent:<h1>Olivia Rhye</h1>,
-    wager: <h1>$100.00</h1>,
-    edit: <Image source={Edit}/> 
-}, 
-{
-    type: <div className='flex items-center gap-2'><Image source={ModeItem_1}/><div className='flex flex-col'><p className='font-bold'>Standard</p><p>10 min</p></div></div>,
-    result: <h1>WIN</h1>,
-    opponent:<h1>Olivia Rhye</h1>,
-    wager: <h1>$100.00</h1>,
-    edit: <Image source={Edit}/> 
-},
-
+    {
+        type: {category: 'Standard', time: 10},
+        result: 'WIN',
+        opponent:'Olivia Rhye',
+        wager: 100.00,
+        edit: '1' 
+    },
+    {
+        type: {category: 'Standard', time: 10},
+        result: 'WIN',
+        opponent:'Olivia Rhye',
+        wager: 100.00,
+        edit: '1' 
+    },
+    {
+        type: {category: 'Standard', time: 10},
+        result: 'WIN',
+        opponent:'Olivia Rhye',
+        wager: 100.00,
+        edit: '1' 
+    },
+    {
+        type: {category: 'Standard', time: 10},
+        result: 'WIN',
+        opponent:'Olivia Rhye',
+        wager: 100.00,
+        edit: '1' 
+    },
+    {
+        type: {category: 'Standard', time: 10},
+        result: 'WIN',
+        opponent:'Olivia Rhye',
+        wager: 100.00,
+        edit: '1' 
+    },
+    {
+        type: {category: 'Standard', time: 10},
+        result: 'WIN',
+        opponent:'Olivia Rhye',
+        wager: 100.00,
+        edit: '1' 
+    },
 ];
 
 const columns: ColumnDefinitionType<History, keyof History>[] = [

src/components/Pools/index.tsx

@@ -1,17 +1,104 @@
-// import { GameModeItem } from '../UI/GameModeItem.ui'
-// import { ModeItem_1 } from '../UI/SVG_ICONS'
+import { useEffect } from "react";
+import { Table } from "../UI";
+import { ColumnDefinitionType } from "../UI";
+import { SortButton } from "../UI/Table/TableSearchMode/SortButton";
+import { useAppState } from "~/providers/StateProvider/StateProvider";
+type Category = 'Bullet' | 'Blitz' | 'Rapid';
+
+interface Pool {
+  category: Category;
+  time: number;
+  betamount: number;
+  participants: number ;
+  status: boolean;
+  queue: number
+}
+const data: Pool[] = [
+  {
+    category: 'Bullet' ,
+    time: 5,
+    betamount: 5,
+    participants: 1000,
+    status: true,
+    queue: 12
+  },
+  {
+    category: 'Blitz',
+    time: 2,
+    betamount: 10,
+    participants: 1000,
+    status: true,
+    queue: 12
+  }, 
+  {
+    category: 'Bullet',
+    time: 3,
+    betamount: 23,
+    participants: 1000,
+    status: true,
+    queue: 12
+  }, 
+  {
+    category: 'Rapid',
+    time: 4,
+    betamount: 4,
+    participants: 1000,
+    status: true,
+    queue: 12
+  },  
+
+];
+
+const columns: ColumnDefinitionType<Pool, keyof Pool>[] = [
+  {
+    key: 'category',
+    header: 'Category',
+    width: 150
+  },
+  {
+    key: 'time',
+    header: 'Time',
+  },
+  {
+    key: 'betamount',
+    header: 'Bet Amount'
+  },
+  {
+    key: 'participants',
+    header: 'No.of Participants'
+  },
+  {
+    key: 'status',
+    header: 'Status'
+  },
+  {
+    key: 'queue',
+    header: 'Player queue'
+  }
+]
+
 const Pools: React.FC = () => {
+  const { state: {tableData}, actions: {setTableData} } = useAppState();
+  useEffect(() => {
+    setTableData(data);
+  }, []);
   return (
     <div className="flex flex-col justify-center my-auto">
-      <p className="font-bold text-5xl text-gray-300 mb-[150px] mx-auto">
-        Coming Soon...
-      </p>
-      {/* <div className='flex gap-8 justify-center'>
-                <GameModeItem text='10 Min Quick Match' icon = {<ModeItem_1 />}/>
-                <GameModeItem text='New Game'/>
-                <GameModeItem text='V/S Computer'/>
-                <GameModeItem text='Play a Friend'/>
-            </div> */}
+      <div>
+        <div className="flex justify-between mx-6">
+          <div className="space-x-2">
+            <span className="text-lg font-medium">Active Pools</span>
+            <span className="bg-[#F9F5FF] rounded-xl px-2 py-1 text-xs text-purple-100 ">125 Pools</span>
+          </div>
+          <div>
+            <SortButton columns={columns} data={data}/>
+          </div>
+        </div>
+        <Table
+          columns={columns}
+          data = {tableData}
+        />
+      </div>
     </div>
   );
 };

src/components/UI/Table/TableCell.tsx

@@ -0,0 +1,71 @@
+import { ColumnDefinitionType } from '..';
+import { Image } from '../Image.ui'
+import ModeItem_1 from '~/assets/icons/1.svg';
+import Edit from '~/assets/img/edit.png'
+
+type TableCellProps<T, K extends keyof T> = {
+  data: T;
+  column: ColumnDefinitionType<T, K>;
+};
+
+type ChessType = {
+    category: string;
+    time: number;
+}
+
+export const TableCell = <T, K extends keyof T>({ data, column }: TableCellProps<T, K>): JSX.Element => {
+  switch(column.key){
+    case 'category':
+      return(
+        <p>(icon){data[column.key] as any}</p>
+      )
+    case 'time':
+      return(
+        <p>{data[column.key] as any} min</p>
+      )
+    case 'betamount':
+      return(
+        <p>$ {data[column.key] as any}</p>
+      )
+    case 'participants':
+      return(
+        <p>{data[column.key] as any}</p>
+      )
+    case 'status':
+      return(
+        <p>{data[column.key]?'Active':'Passive'}</p>
+      )
+    case 'queue':
+      return(
+        <p>{data[column.key] as any}</p>
+      )
+    case 'type':
+        const temp_cell = data[column.key] as ChessType
+        return(
+            <div className='flex items-center gap-2'>
+                <Image source={ModeItem_1}/>
+                <div className='flex flex-col'>
+                    <p className='font-bold'>{ temp_cell.category }</p>
+                    <p>{ temp_cell.time } min</p>
+                </div>
+            </div>
+        )
+    case 'result':
+        return (
+            <p>{data[column.key] as any}</p>
+        )
+    case 'opponent':
+        return (
+            <p>{data[column.key] as any}</p>
+        )
+    case 'wager':
+        return(
+            <p>$ {data[column.key] as any}</p>
+        )
+    case 'edit':
+        return(
+            <Image source={Edit}/>
+        )
+    default: return(<></>)
+  }
+}

src/components/UI/Table/TableRows.tsx

@@ -1,4 +1,5 @@
 import { ColumnDefinitionType } from '.';
+import { TableCell } from './TableCell';
 type TableRowsProps<T, K extends keyof T> = {
   data: Array<T>;
   columns: Array<ColumnDefinitionType<T, K>>;
@@ -11,7 +12,7 @@ const TableRows = <T, K extends keyof T>({ data, columns }: TableRowsProps<T, K>
         {columns.map((column, index2) => {
           return (
             <td key={`cell-${index2}`} className={`${index2 === 0 ? 'pl-4' : ''}`}>
-              {row[column.key] as any}
+              <TableCell column={column} data={row}/>
             </td>
           );
         })}