add cards table and pagination

src/components/decks/cards-table.tsx

@@ -0,0 +1,47 @@
+import { Column, Table, TableBody, TableCell, TableHeader, TableRow } from '@/components'
+import { Card } from '@/services/decks'
+import { formatDate } from '@/utils'
+
+const columns: Column[] = [
+  {
+    key: 'question',
+    title: 'Question',
+    sortable: true,
+  },
+  {
+    key: 'answer',
+    title: 'Answer',
+    sortable: true,
+  },
+  {
+    key: 'updated',
+    title: 'Last Updated',
+    sortable: true,
+  },
+  {
+    key: 'grade',
+    title: 'Grade',
+    sortable: true,
+  },
+]
+
+type Props = {
+  cards: Card[] | undefined
+}
+export const CardsTable = ({ cards }: Props) => {
+  return (
+    <Table>
+      <TableHeader columns={columns} />
+      <TableBody>
+        {cards?.map(card => (
+          <TableRow key={card.id}>
+            <TableCell>{card.question}</TableCell>
+            <TableCell>{card.answer}</TableCell>
+            <TableCell>{formatDate(card.updated)}</TableCell>
+            <TableCell>{card.grade}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

src/components/decks/decks-table.tsx

@@ -0,0 +1,62 @@
+import { Link } from 'react-router-dom'
+
+import {
+  Column,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableRow,
+  Typography,
+} from '@/components'
+import { Deck } from '@/services/decks'
+import { formatDate } from '@/utils'
+
+const columns: Column[] = [
+  {
+    key: 'name',
+    title: 'Name',
+  },
+  {
+    key: 'cardsCount',
+    title: 'Cards',
+  },
+  {
+    key: 'updated',
+    title: 'Last Updated',
+  },
+  {
+    key: 'author',
+    title: 'Created By',
+  },
+  {
+    key: 'actions',
+    title: '',
+  },
+]
+
+type Props = {
+  decks: Deck[] | undefined
+}
+export const DecksTable = ({ decks }: Props) => {
+  return (
+    <Table>
+      <TableHeader columns={columns} />
+      <TableBody>
+        {decks?.map(deck => (
+          <TableRow key={deck.id}>
+            <TableCell>
+              <Typography variant={'body2'} as={Link} to={`/decks/${deck.id}`}>
+                {deck.name}
+              </Typography>
+            </TableCell>
+            <TableCell>{deck.cardsCount}</TableCell>
+            <TableCell>{formatDate(deck.updated)}</TableCell>
+            <TableCell>{deck.author.name}</TableCell>
+            <TableCell>...</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

src/components/decks/index.ts

@@ -0,0 +1,2 @@
+export * from './decks-table.tsx'
+export * from './cards-table.tsx'