init

components/ParagraphGrid/ParagraphGrid.tsx

@@ -0,0 +1,71 @@
+import { Button, Container, Grid, Group, Pagination, Title } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import { Paragraph } from "@prisma/client";
+import { IconArrowBack } from "@tabler/icons";
+import { useRouter } from "next/router";
+import { ReactNode, useEffect, useState } from "react";
+
+import { ParagraphCard } from "../ParagraphCard/ParagraphCard";
+
+interface ListProps {
+  paragraphs: Omit<Paragraph, "content" | "markdown">[];
+  skip: number;
+  take: number;
+  total: number;
+  title: string;
+  titleAction?: ReactNode;
+}
+
+export default function ParagraphGrid({
+  title,
+  paragraphs,
+  skip,
+  take,
+  total,
+  titleAction,
+}: ListProps) {
+  useDocumentTitle(title);
+  const router = useRouter();
+  const [totalPage, setTotalPage] = useState(1);
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    setTotalPage(Math.ceil(total / take));
+    setPage(skip / take + 1);
+  }, [skip, take]);
+
+  function toPage(page: number) {
+    router.push(router.pathname + `?skip=${(page - 1) * take}&take=${take}`);
+  }
+
+  return (
+    <Container my="8rem">
+      <Title>
+        {title} Page {page}
+      </Title>
+      <Group position="apart" my="2rem">
+        <Group>{titleAction}</Group>
+        <Button variant="subtle" onClick={() => router.back()} rightIcon={<IconArrowBack />}>
+          Back
+        </Button>
+      </Group>
+      <Grid my="md">
+        {paragraphs.map((paragraph) => {
+          return (
+            <Grid.Col span={4} key={paragraph.id}>
+              <ParagraphCard
+                title={paragraph.title}
+                id={paragraph.id}
+                author={paragraph.author}
+                time={paragraph.time}
+              />
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+      <Group position="center">
+        <Pagination total={totalPage} value={page} onChange={toPage} withControls withEdges />
+      </Group>
+    </Container>
+  );
+}