Skip to content

Commit 27303cf

Browse files
razoorkarazoorka
committed
discussions layout added
1 parent 9e1e623 commit 27303cf

File tree

6 files changed

+216
-3
lines changed

6 files changed

+216
-3
lines changed

‎packages/web/public/icons/discussions.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎packages/web/src/containers/Common/components/CommonDetailContainer/DiscussionsComponent/DiscussionsComponent.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from "react";
2+
import "./index.scss";
3+
4+
export default function DiscussionsComponent() {
5+
return (
6+
<div className="discussions-component-wrapper">
7+
<div className="discussion-item-wrapper">
8+
<div className="discussion-top-bar">
9+
<div className="img-wrapper">
10+
<img src="https://picsum.photos/40/40" alt="kek" />
11+
</div>
12+
<div className="creator-information">
13+
<div className="name">Peter Parkey</div>
14+
<div className="days-ago">3 days ago</div>
15+
</div>
16+
</div>
17+
<div className="discussion-content">
18+
<div className="title">How about planting trees in india as well?</div>
19+
<div className="description">
20+
I was thinking we should do some work on this and expand to new forests. They need us and our trees. Mother
21+
Nature does a lot of tree planting ably aided by the wind, rain, and critters, both feathered and furry.
22+
However, she would probably appreciate some assistance from us, humans.
23+
</div>
24+
<div className="read-more">Read More</div>
25+
<div className="line"></div>
26+
</div>
27+
<div className="bottom-content">
28+
<div className="discussion-count">
29+
<img src="/icons/discussions.svg" alt="discussions" />
30+
<div className="count">123</div>
31+
</div>
32+
<div className="view-all-discussions">View discussions</div>
33+
</div>
34+
</div>
35+
<div className="discussion-item-wrapper">
36+
<div className="discussion-top-bar">
37+
<div className="img-wrapper">
38+
<img src="https://picsum.photos/40/40" alt="kek" />
39+
</div>
40+
<div className="creator-information">
41+
<div className="name">Peter Parkey</div>
42+
<div className="days-ago">3 days ago</div>
43+
</div>
44+
</div>
45+
<div className="discussion-content">
46+
<div className="title">How about planting trees in india as well?</div>
47+
<div className="description">
48+
I was thinking we should do some work on this and expand to new forests. They need us and our trees. Mother
49+
Nature does a lot of tree planting ably aided by the wind, rain, and critters, both feathered and furry.
50+
However, she would probably appreciate some assistance from us, humans.
51+
</div>
52+
<div className="read-more">Read More</div>
53+
<div className="line"></div>
54+
</div>
55+
<div className="bottom-content">
56+
<div className="discussion-count">
57+
<img src="/icons/discussions.svg" alt="discussions" />
58+
<div className="count">123</div>
59+
</div>
60+
<div className="view-all-discussions">View discussions</div>
61+
</div>
62+
</div>
63+
</div>
64+
);
65+
}

‎packages/web/src/containers/Common/components/CommonDetailContainer/DiscussionsComponent/index.scss‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
.discussions-component-wrapper {
2+
.discussion-item-wrapper {
3+
padding: 40px;
4+
border-radius: 14px;
5+
box-shadow: 0 3px 8px 0 #001a3614;
6+
background-color: #ffffff;
7+
margin-bottom: 24px;
8+
.discussion-top-bar {
9+
display: flex;
10+
margin-bottom: 24px;
11+
.img-wrapper {
12+
margin-right: 16px;
13+
img {
14+
border-radius: 50%;
15+
}
16+
}
17+
.creator-information {
18+
.name {
19+
font-family: NunitoSans;
20+
font-size: 16px;
21+
font-weight: normal;
22+
font-stretch: normal;
23+
font-style: normal;
24+
line-height: 1.5;
25+
letter-spacing: normal;
26+
color: #001a36;
27+
}
28+
.days-ago {
29+
font-family: NunitoSans;
30+
font-size: 14px;
31+
font-weight: normal;
32+
font-stretch: normal;
33+
font-style: normal;
34+
line-height: 1.43;
35+
letter-spacing: normal;
36+
color: #979bba;
37+
}
38+
}
39+
}
40+
.discussion-content {
41+
.title {
42+
font-family: NunitoSans;
43+
font-size: 18px;
44+
font-weight: bold;
45+
font-stretch: normal;
46+
font-style: normal;
47+
line-height: 1.22;
48+
letter-spacing: normal;
49+
color: #7786ff;
50+
margin-bottom: 16px;
51+
}
52+
.description {
53+
font-family: NunitoSans;
54+
font-size: 16px;
55+
font-weight: normal;
56+
font-stretch: normal;
57+
font-style: normal;
58+
line-height: 1.5;
59+
letter-spacing: normal;
60+
color: #001a36;
61+
margin-bottom: 16px;
62+
}
63+
.read-more {
64+
font-family: NunitoSans;
65+
font-size: 16px;
66+
font-weight: bold;
67+
font-stretch: normal;
68+
font-style: normal;
69+
line-height: 1.5;
70+
letter-spacing: normal;
71+
color: #7786ff;
72+
cursor: pointer;
73+
margin-bottom: 16px;
74+
}
75+
.line {
76+
margin: 0 -40px;
77+
width: auto;
78+
}
79+
}
80+
.bottom-content {
81+
margin-top: 20px;
82+
margin-bottom: -15px;
83+
display: flex;
84+
justify-content: space-between;
85+
.discussion-count {
86+
display: flex;
87+
.count {
88+
margin-left: 8px;
89+
font-family: NunitoSans;
90+
font-size: 16px;
91+
font-weight: bold;
92+
font-stretch: normal;
93+
font-style: normal;
94+
line-height: 1.5;
95+
letter-spacing: normal;
96+
color: #979bba;
97+
display: inline-block;
98+
}
99+
}
100+
.view-all-discussions {
101+
font-family: NunitoSans;
102+
font-size: 16px;
103+
font-weight: bold;
104+
font-stretch: normal;
105+
font-style: normal;
106+
line-height: 1.5;
107+
letter-spacing: normal;
108+
text-align: right;
109+
color: #7786ff;
110+
position: relative;
111+
padding-right: 15px;
112+
&::after {
113+
background-image: url("/icons/right-arrow-hover.svg");
114+
display: inline-block;
115+
content: " ";
116+
background-size: 16px 16px;
117+
height: 16px;
118+
width: 16px;
119+
top: 5px;
120+
position: absolute;
121+
right: -4px;
122+
}
123+
}
124+
}
125+
}
126+
}

‎packages/web/src/containers/Common/components/CommonDetailContainer/DiscussionsComponent/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as DiscussionsComponent } from "./DiscussionsComponent";

‎packages/web/src/containers/Common/components/CommonDetailContainer/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from "./AboutTabComponent";
22
export * from "./PreviewInformationList";
3+
export * from "./DiscussionsComponent";

‎packages/web/src/containers/Common/containers/CommonDetailContainer/CommonDetailContainer.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import React, { useEffect, useMemo, useState } from "react";
22
import { useSelector, useDispatch } from "react-redux";
33
import { useParams } from "react-router-dom";
44
import { formatPrice } from "../../../../shared/utils";
5-
import { AboutTabComponent, PreviewInformationList } from "../../components/CommonDetailContainer";
5+
import {
6+
AboutTabComponent,
7+
PreviewInformationList,
8+
DiscussionsComponent,
9+
} from "../../components/CommonDetailContainer";
610
import { getCommonDetail } from "../../store/actions";
711
import { selectCommonDetail, selectProposals, selectDiscussions } from "../../store/selectors";
812
import "./index.scss";
@@ -31,7 +35,7 @@ const tabs = [
3135

3236
export default function CommonDetail() {
3337
const { id } = useParams<CommonDetailRouterParams>();
34-
const [tab, setTab] = useState("about");
38+
const [tab, setTab] = useState("discussions");
3539
const common = useSelector(selectCommonDetail);
3640
const proposals = useSelector(selectProposals);
3741
const discussions = useSelector(selectDiscussions);
@@ -114,7 +118,10 @@ export default function CommonDetail() {
114118
<div className="main-content-container">
115119
<div className="tab-title">{tab}</div>
116120
<div className="inner-main-content-wrapper">
117-
<div className="tab-content-wrapper">{tab === "about" && <AboutTabComponent common={common} />}</div>
121+
<div className="tab-content-wrapper">
122+
{tab === "about" && <AboutTabComponent common={common} />}
123+
{tab === "discussions" && <DiscussionsComponent />}
124+
</div>
118125
<div className="sidebar-wrapper">
119126
<PreviewInformationList
120127
title="Latest Discussions"

0 commit comments

Comments
 (0)