aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-05 23:44:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: added comments section to story/question content page

Browse Source
This commit is contained in:
MTG2000
2022-04-30 12:54:42 +03:00
parent 8be941f584
commit b2209db14d
10 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/Posts/Components/Comments/index.tsx
View File

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

2
src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx
View File

@@ -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>

2
src/features/Posts/pages/CreatePostPage/CreatePostPage.stories.tsx
View File

@@ -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' },

2
src/features/Posts/pages/FeedPage/FeedPage.stories.tsx
View File

@@ -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' },

5
src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.stories.tsx
View File

@@ -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]
// }

39
src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx
View File

@@ -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>
)

40
src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx
View File

@@ -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>
)

2
src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx
View File

@@ -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' },