chore: add color theme

Hot-Spicy-Buffalo-Wing · Jun 7, 2024 · 3be48f2 · 3be48f2
1 parent a39124b
commit 3be48f2
Showing 1 changed file with 32 additions and 29 deletions.
diff --git a/src/pages/PostListPage.tsx b/src/pages/PostListPage.tsx
@@ -1,42 +1,45 @@
-import { Box, Table, Button } from '@mantine/core';
+import { Box, Table, Button, useMantineTheme } from '@mantine/core';
 
 import useSWR from 'swr';
 import { Post } from '../api/post';
 import { Link } from 'react-router-dom';
 
 const PostListPage = () => {
   const { data } = useSWR<{ total: number; list: Post[] }>('/post');
+  const theme = useMantineTheme();
 
   return (
-    <Box display="flex" style={{ flexDirection: 'column', gap: 8 }}>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Title</Table.Th>
-            <Table.Th>Author</Table.Th>
-            <Table.Th>Views</Table.Th>
-            <Table.Th>CreatedAt</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {data?.list.map((post) => (
-            <Table.Tr key={post.id}>
-              <Table.Td>{post.id}</Table.Td>
-              <Table.Td>
-                <Link to={`/posts/${post.id}`}>{post.contents.title}</Link>
-              </Table.Td>
-              <Table.Td>{post.author.name}</Table.Td>
-              <Table.Td>{post.views}</Table.Td>
-              <Table.Td>{post.createdAt}</Table.Td>
+    <Box style={{ padding: 32 }}>
+      <Box display="flex" style={{ flexDirection: 'column', gap: 8 }}>
+        <Table borderColor={theme.colors.cyan[4]}>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Id</Table.Th>
+              <Table.Th>Title</Table.Th>
+              <Table.Th>Author</Table.Th>
+              <Table.Th>Views</Table.Th>
+              <Table.Th>CreatedAt</Table.Th>
             </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-      <Box>
-        <Link to="/posts/create">
-          <Button>Create Post</Button>
-        </Link>
+          </Table.Thead>
+          <Table.Tbody>
+            {data?.list.map((post) => (
+              <Table.Tr key={post.id}>
+                <Table.Td>{post.id}</Table.Td>
+                <Table.Td>
+                  <Link to={`/posts/${post.id}`}>{post.contents.title}</Link>
+                </Table.Td>
+                <Table.Td>{post.author.name}</Table.Td>
+                <Table.Td>{post.views}</Table.Td>
+                <Table.Td>{post.createdAt}</Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+        <Box>
+          <Link to="/posts/create">
+            <Button>Create Post</Button>
+          </Link>
+        </Box>
       </Box>
     </Box>
   );