From 2ec394b39f498fa1feb8dfa4f9c3adf26d8a3c17 Mon Sep 17 00:00:00 2001 From: yoss Date: Wed, 4 Mar 2020 22:12:32 +0700 Subject: [PATCH] Update review detail page. --- frontend/.eslintignore | 3 +- frontend/assets/icons/icon-24-bookmark.svg | 1 + .../assets/icons/icon-24-communication.svg | 1 + frontend/assets/icons/icon-24-facebook.svg | 1 + frontend/assets/icons/icon-24-heart.svg | 1 + frontend/assets/icons/icon-24-twitter.svg | 1 + frontend/components/detail-badge/index.tsx | 47 ++++++++++++ frontend/containers/landing-page/index.tsx | 4 +- .../components/content/index.tsx | 72 +++++++++++-------- .../components/sidebar/index.tsx | 67 ++++++++++++++++- frontend/containers/review-detail/index.tsx | 2 +- 11 files changed, 166 insertions(+), 34 deletions(-) create mode 100644 frontend/assets/icons/icon-24-bookmark.svg create mode 100644 frontend/assets/icons/icon-24-communication.svg create mode 100644 frontend/assets/icons/icon-24-facebook.svg create mode 100644 frontend/assets/icons/icon-24-heart.svg create mode 100644 frontend/assets/icons/icon-24-twitter.svg create mode 100644 frontend/components/detail-badge/index.tsx diff --git a/frontend/.eslintignore b/frontend/.eslintignore index c95df76a..5b1cdd8e 100644 --- a/frontend/.eslintignore +++ b/frontend/.eslintignore @@ -3,4 +3,5 @@ /.next /public /utils -/providers \ No newline at end of file +/providers +/@types \ No newline at end of file diff --git a/frontend/assets/icons/icon-24-bookmark.svg b/frontend/assets/icons/icon-24-bookmark.svg new file mode 100644 index 00000000..f3c3f2ba --- /dev/null +++ b/frontend/assets/icons/icon-24-bookmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/assets/icons/icon-24-communication.svg b/frontend/assets/icons/icon-24-communication.svg new file mode 100644 index 00000000..60d1d313 --- /dev/null +++ b/frontend/assets/icons/icon-24-communication.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/assets/icons/icon-24-facebook.svg b/frontend/assets/icons/icon-24-facebook.svg new file mode 100644 index 00000000..9af5f992 --- /dev/null +++ b/frontend/assets/icons/icon-24-facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/assets/icons/icon-24-heart.svg b/frontend/assets/icons/icon-24-heart.svg new file mode 100644 index 00000000..60075b91 --- /dev/null +++ b/frontend/assets/icons/icon-24-heart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/assets/icons/icon-24-twitter.svg b/frontend/assets/icons/icon-24-twitter.svg new file mode 100644 index 00000000..52d236df --- /dev/null +++ b/frontend/assets/icons/icon-24-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/components/detail-badge/index.tsx b/frontend/components/detail-badge/index.tsx new file mode 100644 index 00000000..557f2a06 --- /dev/null +++ b/frontend/components/detail-badge/index.tsx @@ -0,0 +1,47 @@ +import React, { FunctionComponent } from 'react'; +import Styled from 'styled-components'; +import { List } from 'antd'; + +const StyledListItem = Styled(List.Item)` + & div {display:flex;} + & div.with-new-line{flex-direction:column} + & img{border-radius:50%} + & span {font-weight:500;margin-left:10px;} + & span.txt-muted{ + font-size: 13px; + color: gray; + font-weight: unset; + } + & button{position: absolute !important;right:14px;} +`; +const StyledButton = Styled.button` + border-radius: 16px; + border: 1px solid #17BF63!important; + background-color: white; + font-weight: bolder; + color: #17BF63; + padding: 2px 23px; + font-size: 16px; +`; + +interface Props { + imageUrl: string; + title: string; + subTitle: string; +} + +const Component: FunctionComponent = ({ imageUrl, title, subTitle }) => { + return ( + +
+ +
+ {title} + {subTitle} +
+ {/*เข้าร่วม*/} +
+ + ); +}; +export default Component; diff --git a/frontend/containers/landing-page/index.tsx b/frontend/containers/landing-page/index.tsx index d03fb98c..dfaeb23a 100644 --- a/frontend/containers/landing-page/index.tsx +++ b/frontend/containers/landing-page/index.tsx @@ -9,8 +9,8 @@ const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; export const LandingPage: FunctionComponent = () => { return ( - - } left={} />> + + } left={} /> ); }; diff --git a/frontend/containers/review-detail/components/content/index.tsx b/frontend/containers/review-detail/components/content/index.tsx index c1cd476d..d979d443 100644 --- a/frontend/containers/review-detail/components/content/index.tsx +++ b/frontend/containers/review-detail/components/content/index.tsx @@ -1,34 +1,50 @@ import React, { FunctionComponent } from 'react'; -import GroupLists from 'components/group-lists'; +import styled from 'styled-components'; +import UserDetail from 'components/detail-badge'; + +const Title = styled.div` + font-size: 1.4em; + font-weight: 500; +`; + +const Container = styled.div` + padding: 20px 25px; + border: 1px solid #ccd6dd; + border-radius: 8px; +`; + +const ContentBox = styled.div` + font-size: 1.2em; +`; -const data = [ - { - name: 'Apple Club', - memberCount: 'สมาชิก 15.2k', - imageUrl: - 'https://scontent.furt3-1.fna.fbcdn.net/v/t1.0-9/s960x960/74396069_2594174023999170_8719079083155128320_o.jpg?_nc_cat=102&_nc_oc=AQlutKLKb3uNoRq709fD6_1rLDbaTcEIneNb1Srk4016I6lI9IlwFSHJ06jCVeymodc&_nc_ht=scontent.furt3-1.fna&_nc_tp=7&oh=dd756c038d1b68c9bac24b5fe85a4cdd&oe=5EFDF82A', - }, - { - name: 'Apple Club', - memberCount: 'สมาชิก 15.2k', - imageUrl: - 'https://scontent.furt3-1.fna.fbcdn.net/v/t1.0-9/s960x960/74396069_2594174023999170_8719079083155128320_o.jpg?_nc_cat=102&_nc_oc=AQlutKLKb3uNoRq709fD6_1rLDbaTcEIneNb1Srk4016I6lI9IlwFSHJ06jCVeymodc&_nc_ht=scontent.furt3-1.fna&_nc_tp=7&oh=dd756c038d1b68c9bac24b5fe85a4cdd&oe=5EFDF82A', - }, - { - name: 'Apple Club', - memberCount: 'สมาชิก 15.2k', - imageUrl: - 'https://scontent.furt3-1.fna.fbcdn.net/v/t1.0-9/s960x960/74396069_2594174023999170_8719079083155128320_o.jpg?_nc_cat=102&_nc_oc=AQlutKLKb3uNoRq709fD6_1rLDbaTcEIneNb1Srk4016I6lI9IlwFSHJ06jCVeymodc&_nc_ht=scontent.furt3-1.fna&_nc_tp=7&oh=dd756c038d1b68c9bac24b5fe85a4cdd&oe=5EFDF82A', - }, - { - name: 'Apple Club', - memberCount: 'สมาชิก 15.2k', - imageUrl: - 'https://scontent.furt3-1.fna.fbcdn.net/v/t1.0-9/s960x960/74396069_2594174023999170_8719079083155128320_o.jpg?_nc_cat=102&_nc_oc=AQlutKLKb3uNoRq709fD6_1rLDbaTcEIneNb1Srk4016I6lI9IlwFSHJ06jCVeymodc&_nc_ht=scontent.furt3-1.fna&_nc_tp=7&oh=dd756c038d1b68c9bac24b5fe85a4cdd&oe=5EFDF82A', - }, -]; export const Component: FunctionComponent = () => { - return ; + return ( + + รีวิว iPhone 11 Max Pro พูดเลยว่าของมันต้องมี !! + + + Nattasit from future makers, Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future makers, + Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future makers, Eventpop, Blueseas, + Tovho-system, Phuket Softs Group Nattasit from future makers, Eventpop, Blueseas, Tovho-system, Phuket Softs + Group Nattasit from future makers, Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future + makers, Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future makers, Eventpop, Blueseas, + Tovho-system, Phuket Softs Group Nattasit from future makers, Eventpop, Blueseas, Tovho-system, Phuket Softs + Group Nattasit from future makers, Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future + makers, Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future makers, Eventpop, Blueseas, + Tovho-system, Phuket Softs Group Nattasit from future makers, Eventpop, Blueseas, Tovho-system, Phuket Softs + Group Nattasit from future makers, Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future + makers, Eventpop, Blueseas, Tovho-system, Phuket Softs Group Nattasit from future makers, Eventpop, Blueseas, + Tovho-system, Phuket Softs Group +

+ +

+ + + ); }; export default Component; diff --git a/frontend/containers/review-detail/components/sidebar/index.tsx b/frontend/containers/review-detail/components/sidebar/index.tsx index f40e45d6..c9bc4f71 100644 --- a/frontend/containers/review-detail/components/sidebar/index.tsx +++ b/frontend/containers/review-detail/components/sidebar/index.tsx @@ -1,5 +1,56 @@ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, Fragment } from 'react'; import GroupLists from 'components/group-lists'; +import styled from 'styled-components'; +import IconHeart from '../../../../assets/icons/icon-24-heart.svg'; +import IconFacebook from '../../../../assets/icons/icon-24-facebook.svg'; +import IconTwitter from '../../../../assets/icons/icon-24-twitter.svg'; +import IconCommunication from '../../../../assets/icons/icon-24-communication.svg'; +import IconBookmark from '../../../../assets/icons/icon-24-bookmark.svg'; + +const ReviewMenu = styled.div` + padding: 10px; + margin-top: 10px; + border: 1px solid #ccd6dd; + & div.item { + &.highlight { + font-size: 1.3em; + font-weight: 500; + svg path { + fill: red !important; + } + } + i { + margin-right: 5px; + } + padding: 10px; + display: flex; + align-items: center; + } +`; + +const menuLists = [ + { + icon: , + isHighlight: true, + label: 'ถูกใจรีวิวนี้', + }, + { + icon: , + label: 'แชร์รีวิวนี้ไปยัง Facebook', + }, + { + icon: , + label: 'ทวีตรีวิวนี้ไปยัง Twitter', + }, + { + icon: , + label: 'เก็บไว้ดูภายหลัง', + }, + { + icon: , + label: '20 การแสดงความคิดเห็น', + }, +]; const data = [ { @@ -10,7 +61,19 @@ const data = [ }, ]; export const Component: FunctionComponent = () => { - return ; + return ( + + + + {menuLists.map(({ icon, label, isHighlight = false }, index) => ( +
+ {icon} + {label} +
+ ))} + + + ); }; export default Component; diff --git a/frontend/containers/review-detail/index.tsx b/frontend/containers/review-detail/index.tsx index 5bdcc828..5f4b0d79 100644 --- a/frontend/containers/review-detail/index.tsx +++ b/frontend/containers/review-detail/index.tsx @@ -9,7 +9,7 @@ export const ReviewDetail: FunctionComponent = () => { return ( - } left={}> + } content={} /> ); };