Create comment component

app/actions/comments.ts

@@ -37,9 +37,9 @@ const notificationBody = (comment: { id: number, content: string }, user: { name
 }
 
 export async function addComment(prevState: { message: string }, formData: FormData) {
-    const general_error = 'There was an error with your comment, please try again later.'
+    const general_error = 'There was a problem with your comment, please try again later.'
     const authorisation_error = 'Error, you must be logged in to post a comment.'
-    const success_message = 'Your comment was submitted and is awaiting approval.'
+    const success_message = 'Thanks, your comment was submitted and is awaiting approval.'
 
     const schema = z.object({
         comment: z.string().min(3).max(255),

components/ui/Comments.tsx

@@ -20,20 +20,9 @@ type Comment = {
     }
 }
 
-type CommentsListProps = {
+Comments.Comment = function Comment({comment, isReply = false}: { comment: Comment, isReply?: boolean }) {
-    comments: Comment[]
-}
-
-Comments.List = function List({comments}: CommentsListProps) {
     return (
-        <>
+        <article className="flex gap-x-4 py-5">
-            {comments.length > 0 &&
-                <section>
-                    <h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4">
-                        Comments
-                    </h3>
-                    {comments.map((comment) => (
-                        <article key={comment.id} className="flex gap-x-4 py-5">
             <Image src={comment.user.image} alt={comment.user.name} width={64} height={64}
                    className="size-12 rounded-full"/>
             <div className="flex-auto">
@@ -48,6 +37,23 @@ Comments.List = function List({comments}: CommentsListProps) {
                 <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400 max-w-xl">{comment.content}</p>
             </div>
         </article>
+    )
+}
+
+type CommentsListProps = {
+    comments: Comment[]
+}
+
+Comments.List = function List({comments}: CommentsListProps) {
+    return (
+        <>
+            {comments.length > 0 &&
+                <section>
+                    <h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4">
+                        Comments
+                    </h3>
+                    {comments.map((comment) => (
+                        <Comments.Comment key={comment.id} comment={comment}/>
                     ))}
                 </section>
             }