refactoring issue details page

Author: guri2323

app/issues/[id]/EditIssueButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@radix-ui/themes";
+import Link from "next/link";
+import { Pencil2Icon } from "@radix-ui/react-icons";
+
+const EditIssueButton = ({ issueId }: { issueId: number }) => {
+  return (
+    <Button>
+      <Pencil2Icon />
+      <Link href={`/issues/${issueId}/edit`}>Edit Issue</Link>
+    </Button>
+  );
+};
+
+export default EditIssueButton;

app/issues/[id]/IssueDetails.tsx

@@ -0,0 +1,22 @@
+import { IssueStatusBadge } from "@/app/components";
+import { Issue } from "@prisma/client";
+import { Heading, Flex, Card, Text } from "@radix-ui/themes";
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+const IssueDetails = ({ issue }: { issue: Issue }) => {
+  return (
+    <>
+      <Heading>{issue.title}</Heading>
+      <Flex gap="3" my="2">
+        <IssueStatusBadge status={issue.status} />
+        <Text>{issue.createdAt.toDateString()}</Text>
+      </Flex>
+      <Card className="mt-4">
+        <ReactMarkdown>{issue.description}</ReactMarkdown>
+      </Card>
+    </>
+  );
+};
+
+export default IssueDetails;

app/issues/[id]/page.tsx

@@ -1,10 +1,8 @@
-import { IssueStatusBadge } from "../../components";
 import prisma from "@/prisma/client";
-import { Box, Button, Card, Flex, Grid, Heading, Text } from "@radix-ui/themes";
+import { Box, Grid } from "@radix-ui/themes";
 import { notFound } from "next/navigation";
-import ReactMarkdown from "react-markdown";
-import { Pencil2Icon } from "@radix-ui/react-icons";
-import Link from "next/link";
+import EditIssueButton from "./EditIssueButton";
+import IssueDetails from "./IssueDetails";
 
 interface Props {
   params: {
@@ -13,30 +11,22 @@ interface Props {
 }
 
 const IssueDetailPage = async ({ params }: Props) => {
+  const { id } = await params;
+
   const issue = await prisma.issue.findUnique({
     where: {
-      id: parseInt(params.id),
+      id: parseInt(id),
     },
   });
   if (!issue) notFound();
 
   return (
     <Grid columns={{ initial: "1", sm: "2" }} gap="4">
       <Box>
-        <Heading>{issue.title}</Heading>
-        <Flex gap="3" my="2">
-          <IssueStatusBadge status={issue.status} />
-          <Text>{issue.createdAt.toDateString()}</Text>
-        </Flex>
-        <Card className="mt-4">
-          <ReactMarkdown>{issue.description}</ReactMarkdown>
-        </Card>
+        <IssueDetails issue={issue} />
       </Box>
       <Box>
-        <Button>
-          <Pencil2Icon />
-          <Link href={`/issues/${issue.id}/edit`}>Edit Issue</Link>
-        </Button>
+        <EditIssueButton issueId={issue.id} />
       </Box>
     </Grid>
   );