resolved unhandled errors

Author: guri2323

app/components/Link.tsx

@@ -1,17 +1,14 @@
 import React from "react";
 import NextLink from "next/link";
-import { Link as RadixLink } from "@radix-ui/themes";
 
 interface Props {
   href: string;
   children: string;
 }
 export const Link = ({ href, children }: Props) => {
   return (
-    <NextLink href={href} passHref legacyBehavior>
-      <RadixLink className="text-blue-500 hover:text-blue-700">
-        {children}
-      </RadixLink>
+    <NextLink href={href} className="text-purple-500 hover:text-purple-700">
+      {children}
     </NextLink>
   );
 };

app/issues/[id]/edit/loading.tsx

@@ -0,0 +1,3 @@
+import IssueFormSkeleton from "../../_components/IssueFormSkeleton";
+
+export default IssueFormSkeleton;

app/issues/_components/IssueForm.tsx

@@ -3,13 +3,15 @@ import { issueSchema } from "@/app/createIssueSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Callout, TextField } from "@radix-ui/themes";
 import axios from "axios";
+import "easymde/dist/easymde.min.css";
+import SimpleMDE from "react-simplemde-editor";
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { z } from "zod";
-import { ErrorMessage, Spinner, MarkdownEditor } from "../../components";
+import { ErrorMessage, Spinner } from "../../components";
 import { Issue } from "@prisma/client";
 
 type IssueFormData = z.infer<typeof issueSchema>;
@@ -65,7 +67,7 @@ const IssueForm = ({ issue }: Props) => {
           control={control}
           defaultValue={issue?.description}
           render={({ field }) => (
-            <MarkdownEditor placeholder="Description" {...field} />
+            <SimpleMDE placeholder="Description" {...field} />
           )}
         />
         <ErrorMessage>{errors?.description?.message}</ErrorMessage>

app/issues/_components/IssueFormSkeleton.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "@/app/components";
+import { Box } from "@radix-ui/themes";
+
+const IssueFormSkeleton = () => {
+  return (
+    <Box>
+      <Skeleton height="2rem" />
+      <Skeleton height="20rem" />
+    </Box>
+  );
+};
+
+export default IssueFormSkeleton;

app/issues/new/loading.tsx

@@ -1,7 +1,3 @@
-import React from "react";
+import IssueFormSkeleton from "../_components/IssueFormSkeleton";
 
-const LoadingNewIssuepage = () => {
-  return <div>LoadingNewIssuepage</div>;
-};
-
-export default LoadingNewIssuepage;
+export default IssueFormSkeleton;

app/issues/new/page.tsx

@@ -1,4 +1,11 @@
-import IssueForm from "../_components/IssueForm";
+"use client";
+import dynamic from "next/dynamic";
+import IssueFormSkeleton from "./loading";
+
+const IssueForm = dynamic(() => import("../_components/IssueForm"), {
+  ssr: false,
+  loading: () => <IssueFormSkeleton />,
+});
 
 const NewIssuePage = () => {
   return <IssueForm />;