feat: added comments section to story/question content page

src/features/Posts/Components/Comments/index.tsx

@@ -1 +1 @@
-export { }
+export { default as CommentsSection } from './CommentsSection/CommentsSection'

src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx

@@ -32,7 +32,7 @@ export default function BountyCard({ bounty }: Props) {
                     <div>
                         <Link to={`/blog/post/Bounty/${bounty.id}`}>
                             <h2 className="text-h5 font-bolder mt-16 flex items-center gap-8">
-                                <span><Badge color="none" size="sm" className="bg-yellow-500 text-black">Bounty</Badge> {bounty.title}</span>
+                                <span><Badge color="none" size="sm" className="bg-warning-500 text-black">Bounty</Badge> {bounty.title}</span>
                             </h2>
                         </Link>
 

src/features/Posts/pages/CreatePostPage/CreatePostPage.stories.tsx

@@ -4,7 +4,7 @@ import { WithModals } from 'src/utils/storybook/decorators';
 import CreatePostPage from './CreatePostPage';
 
 export default {
-    title: 'Posts/Create Post Page',
+    title: 'Posts/Create Post Page/Page',
     component: CreatePostPage,
     argTypes: {
         backgroundColor: { control: 'color' },

src/features/Posts/pages/FeedPage/FeedPage.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import FeedPage from './FeedPage';
 
 export default {
-    title: 'Posts/Feed Page',
+    title: 'Posts/Feed Page/Page',
     component: FeedPage,
     argTypes: {
         backgroundColor: { control: 'color' },

src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.stories.tsx

@@ -24,4 +24,9 @@ Bounty.args = {
     post: MOCK_DATA.posts.bounties[0]
 }
 
+// export const Question = Template.bind({});
+// Question.args = {
+//     post: MOCK_DATA.posts.questions[0]
+// }
+
 

src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx

@@ -5,6 +5,7 @@ import styles from './styles.module.css'
 import Badge from "src/Components/Badge/Badge";
 import { BiComment } from "react-icons/bi";
 import { RiFlashlightLine } from "react-icons/ri";
+import { CommentsSection } from "src/features/Posts/Components/Comments";
 
 
 interface Props {
@@ -13,26 +14,32 @@ interface Props {
 
 export default function QuestionPageContent({ question }: Props) {
     return (
-        <div className="bg-white p-32 border rounded-16">
-            <div className="flex flex-col gap-24">
-                <Header size="lg" showTimeAgo={false} author={question.author} date={question.date} />
-                <h1 className="text-h2 font-bolder">{question.title}</h1>
-                <div className="flex gap-8">
-                    {question.tags.map(tag => <Badge key={tag.id} size='sm'>
-                        {tag.title}
-                    </Badge>)}
+        <div>
+            <div className="bg-white p-32 border rounded-16">
+                <div className="flex flex-col gap-24">
+                    <Header size="lg" showTimeAgo={false} author={question.author} date={question.date} />
+                    <h1 className="text-h2 font-bolder">{question.title}</h1>
+                    <div className="flex gap-8">
+                        {question.tags.map(tag => <Badge key={tag.id} size='sm'>
+                            {tag.title}
+                        </Badge>)}
+                    </div>
+                    <div className="flex gap-24">
+                        <div className="text-black font-medium">
+                            <RiFlashlightLine /> <span className="align-middle text-body5">{question.votes_count} votes</span>
+                        </div>
+                        <div className="text-black font-medium">
+                            <BiComment /> <span className="align-middle text-body5">32 Comments</span>
+                        </div>
+                    </div>
                 </div>
-                <div className="flex gap-24">
-                    <div className="text-black font-medium">
-                        <RiFlashlightLine /> <span className="align-middle text-body5">{question.votes_count} votes</span>
-                    </div>
-                    <div className="text-black font-medium">
-                        <BiComment /> <span className="align-middle text-body5">32 Comments</span>
-                    </div>
+
+                <div className={`mt-42 ${styles.body}`} dangerouslySetInnerHTML={{ __html: marked.parse(question.body) }}>
                 </div>
             </div>
 
-            <div className={`mt-42 ${styles.body}`} dangerouslySetInnerHTML={{ __html: marked.parse(question.body) }}>
+            <div className="mt-32">
+                <CommentsSection comments={question.comments} />
             </div>
         </div>
     )

src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx

@@ -5,6 +5,7 @@ import styles from './styles.module.css'
 import Badge from "src/Components/Badge/Badge";
 import { BiComment } from "react-icons/bi";
 import { RiFlashlightLine } from "react-icons/ri";
+import { CommentsSection } from "src/features/Posts/Components/Comments";
 
 
 interface Props {
@@ -13,26 +14,31 @@ interface Props {
 
 export default function StoryPageContent({ story }: Props) {
     return (
-        <div className="bg-white p-32 border rounded-16">
-            <div className="flex flex-col gap-24">
-                <Header size="lg" showTimeAgo={false} author={story.author} date={story.date} />
-                <h1 className="text-h2 font-bolder">{story.title}</h1>
-                <div className="flex gap-8">
-                    {story.tags.map(tag => <Badge key={tag.id} size='sm'>
-                        {tag.title}
-                    </Badge>)}
+        <div>
+            <div className="bg-white p-32 border rounded-16">
+                <div className="flex flex-col gap-24">
+                    <Header size="lg" showTimeAgo={false} author={story.author} date={story.date} />
+                    <h1 className="text-h2 font-bolder">{story.title}</h1>
+                    <div className="flex gap-8">
+                        {story.tags.map(tag => <Badge key={tag.id} size='sm'>
+                            {tag.title}
+                        </Badge>)}
+                    </div>
+                    <div className="flex gap-24">
+                        <div className="text-black font-medium">
+                            <RiFlashlightLine /> <span className="align-middle text-body5">{story.votes_count} votes</span>
+                        </div>
+                        <div className="text-black font-medium">
+                            <BiComment /> <span className="align-middle text-body5">{story.comments_count} Comments</span>
+                        </div>
+                    </div>
                 </div>
-                <div className="flex gap-24">
-                    <div className="text-black font-medium">
-                        <RiFlashlightLine /> <span className="align-middle text-body5">{story.votes_count} votes</span>
-                    </div>
-                    <div className="text-black font-medium">
-                        <BiComment /> <span className="align-middle text-body5">32 Comments</span>
-                    </div>
+
+                <div className={`mt-42 ${styles.body}`} dangerouslySetInnerHTML={{ __html: marked.parse(story.body) }}>
                 </div>
             </div>
-
-            <div className={`mt-42 ${styles.body}`} dangerouslySetInnerHTML={{ __html: marked.parse(story.body) }}>
+            <div className="mt-32">
+                <CommentsSection comments={story.comments} />
             </div>
         </div>
     )

src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx

@@ -3,7 +3,7 @@ import { ModifyArgs } from 'src/utils/storybook/utils';
 import PostDetailsPage from './PostDetailsPage';
 
 export default {
-    title: 'Posts/Post Details Page',
+    title: 'Posts/Post Details Page/Page',
     component: PostDetailsPage,
     argTypes: {
         backgroundColor: { control: 'color' },

src/mocks/data/posts.ts

@@ -84,7 +84,7 @@ export let posts = {
             title: 'Digital Editor, Mars Review of Books',
             body: postBody,
             cover_image: getCoverImage(),
-            comments_count: 31,
+            comments_count: 3,
             date: getDate(),
             votes_count: 120,
             excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
@@ -95,7 +95,7 @@ export let posts = {
                 { id: 3, title: "guide" },
             ],
             author: getAuthor(),
-            comments: generatePostComments(),
+            comments: generatePostComments(3),
 
         },
     ] as Story[],
@@ -128,7 +128,7 @@ export let posts = {
             id: 33,
             title: 'Digital Editor, Mars Review of Books',
             body: postBody,
-            answers_count: 31,
+            answers_count: 3,
             date: getDate(),
             votes_count: 70,
             excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',

src/utils/theme/colors.js

@@ -37,6 +37,7 @@ const colors = {
         50: "#FFFAEB",
         100: "#FEF0C7",
         200: "#FEDF89",
+        500: '#F59E0B'
     },
 
     // Custom Colors