Added simple admin page

src/components/Post.tsx

@@ -17,7 +17,7 @@ const Post: FC<{
 		<div className="columns mt-2">
 			<div
 				className={multipleClassNames(
-					"column col-4 col-md-6 col-ml-auto bg-gray",
+					"column col-4 col-md-12 col-ml-auto bg-gray",
 					styles.body
 				)}
 			>
@@ -39,7 +39,7 @@ const Post: FC<{
 			</div>
 			<div
 				className={multipleClassNames(
-					"column col-4 col-md-6 col-mr-auto bg-gray",
+					"column col-4 col-md-12 col-mr-auto bg-gray",
 					styles.body,
 					styles.info
 				)}

src/pages/api/blog/new.ts

@@ -35,7 +35,8 @@ const handle: NextApiHandler = async (req, res) => {
 				create: {
 					...data,
 					published: data.published !== undefined,
-					tags: data.tags.trim().split(" ")
+					tags: data.tags.trim().split(" "),
+					content: data.content.trim()
 				}
 			}
 		}

src/pages/blog/[id].tsx

@@ -24,6 +24,7 @@ const PostPage: NextPage<{
 						<div className="column col-2" />
 						<div className="column col-6 col-md-12">
 							<h1>{post.title}</h1>
+							<div className="divider" />
 							<h4>
 								by {post.author.name} on{" "}
 								{new Date(post.createdAt).toLocaleDateString()}

src/pages/blog/admin.module.scss

@@ -0,0 +1,3 @@
+.body {
+    padding: 10rem 0;
+}

src/pages/blog/admin.tsx

@@ -8,14 +8,79 @@ import Layout from "@components/Layout";
 import { withSessionSsr } from "@utils/session";
 import prisma from "@utils/prisma";
 
-const AdminPage: NextPage<{ user: User; posts: Post & { author: User } }> = ({
-	user,
-	posts
-}) => {
+import styles from "./admin.module.scss";
+
+const AdminPage: NextPage<{
+	user: User;
+	users: User[];
+	posts: (Post & { author: User })[];
+}> = ({ user, users, posts }) => {
 	return (
 		<Layout>
 			<NextSeo title="Admin" />
-			Welcome {user.name}
+			<div className={styles.body}>
+				<div className="container">
+					<div className="columns">
+						<div className="col col-8 col-mx-auto">
+							<h3>Welcome {user.name}</h3>
+						</div>
+						<div className="col col-8 col-mx-auto py-2">
+							<h4>Users</h4>
+							<table className="table table-striped table-hover mb-2">
+								<thead>
+									<tr>
+										<th>id</th>
+										<th>name</th>
+										<th>email</th>
+										<th>admin</th>
+										<th>postCount</th>
+									</tr>
+								</thead>
+								<tbody>
+									{users.map((user, i) => (
+										<tr key={user.id} className={i % 2 === 0 ? "active" : ""}>
+											<td>{user.id}</td>
+											<td>{user.name}</td>
+											<td>{user.email}</td>
+											<td>{user.admin ? "true" : "false"}</td>
+											<td>0</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+						<div className="col col-8 col-mx-auto">
+							<h4>Posts</h4>
+							<table className="table table-striped table-hover">
+								<thead>
+									<tr>
+										<th>id</th>
+										<th>title</th>
+										<th>content</th>
+										<th>published</th>
+										<th>createdAt</th>
+										<th>tags</th>
+										<th>author</th>
+									</tr>
+								</thead>
+								<tbody>
+									{posts.map((post, i) => (
+										<tr key={post.id} className={i % 2 === 0 ? "active" : ""}>
+											<td>{post.id}</td>
+											<td>{post.title}</td>
+											<td>{post.content}</td>
+											<td>{post.published ? "true" : "false"}</td>
+											<td>{new Date(post.createdAt).toLocaleString()}</td>
+											<td>{post.tags}</td>
+											<td>{post.author.name}</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+			</div>
 		</Layout>
 	);
 };
@@ -31,7 +96,23 @@ export const getServerSideProps = withSessionSsr(async ({ req }) => {
 		include: { author: true }
 	});
 
-	return { props: { user, posts } };
+	const users = await prisma.user.findMany({
+		orderBy: { id: "desc" },
+		take: 5
+	});
+
+	return {
+		props: {
+			user,
+			users,
+			posts: posts.map((post) => ({
+				...post,
+				createdAt: post.createdAt.getTime(),
+				tags: post.tags.join(", "),
+				content: post.content?.slice(0, 100).concat("...")
+			}))
+		}
+	};
 });
 
 export default AdminPage;

src/pages/blog/blog.module.scss

@@ -1,4 +1,10 @@
 .body {
+
     padding: 10rem 1rem;
+
+    @media (max-width: 840px) {
+        padding: 2rem 1rem;
+    }
+
     min-height: 100vh;
 }

src/pages/blog/index.tsx

@@ -67,7 +67,7 @@ export const getStaticProps: GetStaticProps = async (
 			posts: posts.map((post) => ({
 				...post,
 				createdAt: post.createdAt.toString(),
-				content: post.content?.split("\n")[0]
+				content: post.content?.trim().split("\n")[0]
 			}))
 		},
 		revalidate: 60 * 1

src/styles/_dark.scss

@@ -43,6 +43,19 @@
         border-color: $bg-dark-secondary;
     }
 
+    .table {
+
+        td,
+        th {
+            border-color: lighten($bg-dark-secondary, 10%);
+        }
+    }
+
+    .table tbody tr.active,
+    .table.table-striped tbody tr.active {
+        background: $bg-dark-secondary
+    }
+
     a:hover {
         color: $primary-color-dark;
     }

src/styles/globals.scss

@@ -3,4 +3,8 @@
 
 @import "variables";
 
-@import "dark";
+@import "dark";
+
+p {
+    line-height: 1.25rem;
+}