Merge pull request #123 from sora32127/comment_feed

コメントフィードページの追加

app/components/CommentSection.tsx

@@ -0,0 +1,33 @@
+import type{ CommentShowCardData } from "~/modules/db.server";
+import CommentShowCard from "./CommentShowCard";
+import { H2 } from "./Headings";
+
+type CommentSectionProps = {
+    title: string;
+    comments: CommentShowCardData[];
+    children?: React.ReactNode;
+};
+
+export default function CommentSection({ title, comments, children }: CommentSectionProps) {
+    return (
+        <section className="recent-comments">
+            <H2>{title}</H2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {comments.map((comment) => (
+                    <CommentShowCard
+                        key={comment.commentId}
+                        commentId={comment.commentId}
+                        commentContent={comment.commentContent}
+                        commentDateGmt={comment.commentDateGmt}
+                        commentAuthor={comment.commentAuthor}
+                        postId={comment.postId}
+                        postTitle={comment.postTitle}
+                        countLikes={comment.countLikes}
+                        countDislikes={comment.countDislikes}
+                    />
+                ))}
+            </div>
+            {children}
+        </section>
+    );
+}

app/components/CommentShowCard.tsx

@@ -3,35 +3,38 @@ import CommentIcon from "./icons/CommentIcon";
 import ArticleIcon from "./icons/ArticleIcon";
 import RelativeDate from "./RelativeDate";
 import ClockIcon from "./icons/ClockIcon";
+import ThumbsDownIcon from "./icons/ThumbsDownIcon";
+import ThumbsUpIcon from "./icons/ThumbsUpIcon";
+import type { CommentShowCardData } from "~/modules/db.server";
 
-interface CommentShowCardProps {
-  commentContent: string;
-  commentDateGmt: string;
-  commentAuthor: string;
-  postId: number;
-  dimPosts: {
-      postTitle: string;
-  };
-}
 
 export default function CommentShowCard({
   commentContent,
   commentDateGmt,
-  commentAuthor,
   postId,
-  dimPosts,
-}: CommentShowCardProps) {
-
+  postTitle,
+  countLikes,
+  countDislikes,
+}: CommentShowCardData) {
   return (
       <div className="bg-base-100 border-b border-neutral p-4 mb-4">
         <div className="flex justify-between items-center mb-2">
             <div className="flex my-1">
                 <div className="pr-2">
                     <ClockIcon/>
                 </div>
-                <RelativeDate timestamp={commentDateGmt} />
+                <RelativeDate timestamp={commentDateGmt.toString()} />
+            </div>
+            <div className="flex justify-between items-center gap-x-2">
+                <div className="flex gap-x-1">
+                    <ThumbsUpIcon />
+                    <span>{countLikes}</span>
+                </div>
+                <div className="flex gap-x-1">
+                    <ThumbsDownIcon />
+                    <span>{countDislikes}</span>
+                </div>
             </div>
-            <span className="text-lg font-bold text-base-content comment-author">{commentAuthor}</span>
         </div>
         <div className="grid grid-cols-[auto_1fr] gap-2 mb-2 items-center">
             <div className="w-6 h-6">
@@ -43,8 +46,9 @@ export default function CommentShowCard({
             <div className="w-6 h-6">
                 <ArticleIcon />
             </div>
-            <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-info underline underline-offset-4 post-title">{dimPosts.postTitle}</NavLink>
+            <NavLink to={`/archives/${postId}`} className="text-xl font-bold post-title hover:underline hover:underline-offset-4">{postTitle}</NavLink>
         </div>
+
       </div>
   );
 }

app/components/PostSection.tsx

@@ -0,0 +1,34 @@
+import type { PostCardData } from "~/modules/db.server";
+import { H2 } from "./Headings";
+import PostCard from "./PostCard";
+
+type PostSectionProps = {
+    title: string;
+    posts: PostCardData[];
+    identifier: string;
+    children?: React.ReactNode;
+};
+
+export default function PostSection({ title, posts, identifier, children }: PostSectionProps) {
+    return (
+        <section className={`${identifier}-posts`}>
+            <H2>{title}</H2>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {posts.map((post) => (
+                        <PostCard
+                            key={`${identifier}-${post.postId}`}
+                            postId={post.postId}
+                            postTitle={post.postTitle}
+                            postDateGmt={post.postDateGmt.toString()}
+                            tagNames={post.tags.map((tag) => tag.tagName)}
+                            countLikes={post.countLikes}
+                            countDislikes={post.countDislikes}
+                            countComments={post.countComments}
+                            identifier={identifier}
+                        />
+                    ))}
+                </div>
+            {children}
+        </section>
+    );
+}