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

style: blog components responsive

Browse Source
This commit is contained in:
MTG2000
2022-05-16 12:25:48 +03:00
parent 1a320630a7
commit 3964c086e6
11 changed files with 150 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -103,7 +103,7 @@ export default function AddComment({ initialContent, placeholder, name, autoFocu
autoFocus={autoFocus}
>
<div className="flex gap-16 items-start pb-24 border-b border-gray-200 focus-within:border-primary-500">
<div className="mt-16 shrink-0"><Avatar width={48} src='https://i.pravatar.cc/150?img=1' /></div>
<div className="hidden sm:block mt-16 shrink-0"><Avatar width={48} src='https://i.pravatar.cc/150?img=1' /></div>
<div className="flex-grow">
<EditorComponent
/>

4
src/features/Posts/Components/Comments/Comment/Comment.tsx
View File

@@ -26,8 +26,8 @@ export default function Comment({ comment, onClickedReply }: Props) {
return (
<div >
<CommentCard comment={comment} onReply={clickReply} />
{(comment.replies.length > 0 || replyOpen) && <div className="flex mt-16 gap-20">
<div className="border-l border-b border-gray-200 w-24 h-40 rounded-bl-8 flex-shrink-0 ml-8"></div>
{(comment.replies.length > 0 || replyOpen) && <div className="flex mt-16 gap-8 md:gap-20 pl-8">
<div className="border-l border-b border-gray-200 w-16 md:w-24 h-40 rounded-bl-8 flex-shrink-0"></div>
<div className="flex flex-col w-full gap-16">
{comment.replies.map(reply => <Comment
key={reply.id}

29
src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.stories.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MOCK_DATA } from 'src/mocks/data';
import BountyApplicants from './BountyApplicants';
export default {
title: 'Posts/Post Details Page/Components/Bounty Page Content/Applicants',
component: BountyApplicants,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof BountyApplicants>;
const Template: ComponentStory<typeof BountyApplicants> = (args) => <div className="max-w-[890px]"><BountyApplicants {...args as any} ></BountyApplicants></div>
export const Default = Template.bind({});
Default.args = {
applications: MOCK_DATA.posts.bounties[0]['applications']
}
export const Empty = Template.bind({});
Empty.args = {
applications: []
}

36
src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { FiMeh } from 'react-icons/fi'
import Header from 'src/features/Posts/Components/PostCard/Header/Header'
import { Bounty } from 'src/features/Posts/types'
interface Props {
applications: Bounty['applications']
}
export default function BountyApplicants({ applications }: Props) {
return (
<div className="border bg-white rounded-8 p-24 mt-16">
<h4 className="text-body2 font-bolder">Applicants</h4>
{applications.length > 0 && <ul className="flex flex-col gap-16 mt-16">
{applications.map(application =>
<li key={application.id}>
<Header author={application.author} size='sm' date={application.date} />
<div className="bg-gray-100 mt-10 p-16 rounded-8">
<p className="text-body5 font-medium mb-8">Work Plan</p>
<p className="text-body5 text-gray-600"> {application.workplan}</p>
</div>
</li>
)}
</ul>}
{applications.length === 0 && <div className='flex flex-col gap-16 mt-16'>
<FiMeh className='text-body2' />
<p className="text-body4 font-medium">
No applicants yet
</p>
<p className="text-body5">
The current bounty has no current appliacants
</p>
</div>}
</div>
)
}

24
src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.stories.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MOCK_DATA } from 'src/mocks/data';
import BountyPageContent from './BountyPageContent';
export default {
title: 'Posts/Post Details Page/Components/Bounty Page Content',
component: BountyPageContent,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof BountyPageContent>;
const Template: ComponentStory<typeof BountyPageContent> = (args) => <div className="max-w-[890px]"><BountyPageContent {...args as any} ></BountyPageContent></div>
export const Default = Template.bind({});
Default.args = {
bounty: MOCK_DATA.posts.bounties[0]
}

23
src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx → src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.tsx
View File

@@ -1,12 +1,13 @@
import Header from "src/features/Posts/Components/PostCard/Header/Header"
import { Bounty, } from "src/features/Posts/types"
import { marked } from 'marked';
import styles from './styles.module.css'
import styles from '../PageContent/styles.module.css'
import Badge from "src/Components/Badge/Badge";
import { BiComment } from "react-icons/bi";
import VotesCount from "src/Components/VotesCount/VotesCount";
import Button from "src/Components/Button/Button";
import { FiGithub, FiShare2 } from "react-icons/fi";
import BountyApplicants from "./BountyApplicants";
interface Props {
@@ -20,7 +21,7 @@ export default function BountyPageContent({ bounty }: Props) {
{/* Header */}
<div className="flex flex-col gap-24">
<Header size="lg" showTimeAgo={false} author={bounty.author} date={bounty.date} />
<h1 className="text-h2 font-bolder">{bounty.title} <Badge color="none" size="sm" className="bg-yellow-500 text-black">Bounty</Badge></h1>
<h1 className="text-h2 font-bolder">{bounty.title} <Badge color="none" size="sm" className="bg-warning-500 text-black">Bounty</Badge></h1>
<div className="">
<span className="text-body4 text-gray-600 font-bolder">Reward: </span>
<span className="text-body4 text-purple-500 font-medium">{bounty.reward_amount} sats</span>
@@ -31,7 +32,7 @@ export default function BountyPageContent({ bounty }: Props) {
<BiComment /> <span className="align-middle text-body5">32 Comments</span>
</div>
</div>
<div className="flex gap-16">
<div className="flex flex-col md:flex-row gap-16">
<Button size='sm' color="black" className="!font-normal">
Express Interest
</Button>
@@ -52,21 +53,7 @@ export default function BountyPageContent({ bounty }: Props) {
</Badge>)}
</div>
{/* Applicants */}
<div className="border bg-white rounded-8 p-24 mt-16">
<h4 className="text-body2 font-bolder">Applicants</h4>
<ul className="flex flex-col gap-16 mt-16">
{bounty.applications.map(application =>
<li key={application.id}>
<Header author={application.author} size='sm' date={application.date} />
<div className="bg-gray-100 mt-10 p-16 rounded-8">
<p className="text-body5 font-medium mb-8">Work Plan</p>
<p className="text-body5 text-gray-600"> {application.workplan}</p>
</div>
</li>
)}
</ul>
</div>
<BountyApplicants applications={bounty.applications} />
</div>
)
}

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

@@ -1,8 +1,8 @@
import { isBounty, isQuestion, isStory, Post } from "src/features/Posts/types"
import StoryPageContent from "./StoryPageContent";
import BountyPageContent from "./BountyPageContent";
import StoryPageContent from "../StoryPageContent/StoryPageContent";
import BountyPageContent from "../BountyPageContent/BountyPageContent";
import QuestionPageContent from "../QuestionPageContent/QuestionPageContent";
import { PostDetailsQuery } from "src/graphql";
import QuestionPageContent from "./QuestionPageContent";
interface Props {

24
src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.stories.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MOCK_DATA } from 'src/mocks/data';
import QuestionPageContent from './QuestionPageContent';
export default {
title: 'Posts/Post Details Page/Components/Question Page Content',
component: QuestionPageContent,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof QuestionPageContent>;
const Template: ComponentStory<typeof QuestionPageContent> = (args) => <div className="max-w-[890px]"><QuestionPageContent {...args as any} ></QuestionPageContent></div>
export const Default = Template.bind({});
Default.args = {
question: MOCK_DATA.posts.questions[0]
}

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

@@ -1,7 +1,7 @@
import Header from "src/features/Posts/Components/PostCard/Header/Header"
import { Question } from "src/features/Posts/types"
import { marked } from 'marked';
import styles from './styles.module.css'
import styles from '../PageContent/styles.module.css'
import Badge from "src/Components/Badge/Badge";
import { BiComment } from "react-icons/bi";
import { RiFlashlightLine } from "react-icons/ri";

24
src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.stories.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MOCK_DATA } from 'src/mocks/data';
import StoryPageContent from './StoryPageContent';
export default {
title: 'Posts/Post Details Page/Components/Story Page Content',
component: StoryPageContent,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof StoryPageContent>;
const Template: ComponentStory<typeof StoryPageContent> = (args) => <div className="max-w-[890px]"><StoryPageContent {...args as any} ></StoryPageContent></div>
export const Default = Template.bind({});
Default.args = {
story: MOCK_DATA.posts.stories[0]
}

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

@@ -1,7 +1,7 @@
import Header from "src/features/Posts/Components/PostCard/Header/Header"
import { Story } from "src/features/Posts/types"
import { marked } from 'marked';
import styles from './styles.module.css'
import styles from '../PageContent/styles.module.css'
import Badge from "src/Components/Badge/Badge";
import { BiComment } from "react-icons/bi";
import { RiFlashlightLine } from "react-icons/ri";