From 966630ad87075cf0f3d042ffe7ce75e433a22b88 Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Sat, 20 Jan 2024 21:49:10 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20add=20prototype=20-=20group=20d?= =?UTF-8?q?etail=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Group/GroupList/GroupCard.jsx | 5 +- .../Group/GroupList/GroupCard.styled.jsx | 54 +++++++------ components/Group/Paper.styled.jsx | 12 +++ components/Group/detail/Detail.styled.jsx | 31 ++++++++ components/Group/detail/More.jsx | 48 ++++++++++++ components/Group/detail/OrganizerCard.jsx | 11 +++ components/Group/detail/TeamInfoCard.jsx | 78 +++++++++++++++++++ components/Group/detail/index.jsx | 69 ++++++++++++++++ components/Group/index.jsx | 23 ++---- pages/group/detail/index.jsx | 34 ++++++++ public/assets/icons/bachelorCap.svg | 4 + public/assets/icons/category.svg | 4 + public/assets/icons/chat.svg | 3 + public/assets/icons/clock.svg | 11 +++ public/assets/icons/location.svg | 4 + public/assets/icons/person.svg | 3 + shared/components/Button/index.jsx | 11 ++- 17 files changed, 354 insertions(+), 51 deletions(-) create mode 100644 components/Group/Paper.styled.jsx create mode 100644 components/Group/detail/Detail.styled.jsx create mode 100644 components/Group/detail/More.jsx create mode 100644 components/Group/detail/OrganizerCard.jsx create mode 100644 components/Group/detail/TeamInfoCard.jsx create mode 100644 components/Group/detail/index.jsx create mode 100644 pages/group/detail/index.jsx create mode 100644 public/assets/icons/bachelorCap.svg create mode 100644 public/assets/icons/category.svg create mode 100644 public/assets/icons/chat.svg create mode 100644 public/assets/icons/clock.svg create mode 100644 public/assets/icons/location.svg create mode 100644 public/assets/icons/person.svg diff --git a/components/Group/GroupList/GroupCard.jsx b/components/Group/GroupList/GroupCard.jsx index 38a889a1..3fe81f4a 100644 --- a/components/Group/GroupList/GroupCard.jsx +++ b/components/Group/GroupList/GroupCard.jsx @@ -11,6 +11,7 @@ import { StyledLabel, StyledText, StyledTitle, + StyledStatus, } from './GroupCard.styled'; function GroupCard({ @@ -49,9 +50,9 @@ function GroupCard({ {isGrouping ? ( -
揪團中
+ 揪團中 ) : ( -
已結束
+ 已結束 )} diff --git a/components/Group/GroupList/GroupCard.styled.jsx b/components/Group/GroupList/GroupCard.styled.jsx index 4c3dd3cf..a2f74168 100644 --- a/components/Group/GroupList/GroupCard.styled.jsx +++ b/components/Group/GroupList/GroupCard.styled.jsx @@ -39,41 +39,39 @@ export const StyledFooter = styled.footer` justify-content: space-between; align-items: center; - time, - div { - font-size: 12px; - } - time { + font-size: 12px; font-weight: 300; color: #92989a; } +`; - div { - --bg-color: #def5f5; - --color: #16b9b3; - display: flex; - align-items: center; - padding: 4px 10px; - background: var(--bg-color); - color: var(--color); - border-radius: 4px; - font-weight: 500; - gap: 4px; +export const StyledStatus = styled.div` + --bg-color: #def5f5; + --color: #16b9b3; + display: flex; + align-items: center; + width: max-content; + font-size: 12px; + padding: 4px 10px; + background: var(--bg-color); + color: var(--color); + border-radius: 4px; + font-weight: 500; + gap: 4px; - &::before { - content: ''; - display: block; - width: 8px; - height: 8px; - background: var(--color); - border-radius: 50%; - } + &::before { + content: ''; + display: block; + width: 8px; + height: 8px; + background: var(--color); + border-radius: 50%; + } - &.finished { - --bg-color: #f3f3f3; - --color: #92989a; - } + &.finished { + --bg-color: #f3f3f3; + --color: #92989a; } `; diff --git a/components/Group/Paper.styled.jsx b/components/Group/Paper.styled.jsx new file mode 100644 index 00000000..805f8c85 --- /dev/null +++ b/components/Group/Paper.styled.jsx @@ -0,0 +1,12 @@ +import styled from '@emotion/styled'; +import { Box } from '@mui/material'; + +const StyledPaper = styled(Box)` + padding: 32px; + border-radius: 20px; + box-shadow: 0px 4px 6px rgba(196, 194, 193, 0.2); + background: #fff; + z-index: 2; +`; + +export default StyledPaper; diff --git a/components/Group/detail/Detail.styled.jsx b/components/Group/detail/Detail.styled.jsx new file mode 100644 index 00000000..0f0fd143 --- /dev/null +++ b/components/Group/detail/Detail.styled.jsx @@ -0,0 +1,31 @@ +import Link from 'next/link'; +import styled from '@emotion/styled'; + +export const StyledLink = styled(Link)` + display: inline-block; + padding: 0 4px; + color: #536166; + font-size: 14px; + span { + padding-left: 4px; + } +`; + +export const StyledHeading = styled.h1` + margin-top: 8px; + font-size: 22px; + font-weight: 700; + color: #536166; +`; + +export const StyledContainer = styled.main` + position: relative; + padding-top: 60px; + margin: 0 auto; + width: 720px; + + @media (max-width: 760px) { + padding: 20px; + width: 100%; + } +`; diff --git a/components/Group/detail/More.jsx b/components/Group/detail/More.jsx new file mode 100644 index 00000000..2a0bc09d --- /dev/null +++ b/components/Group/detail/More.jsx @@ -0,0 +1,48 @@ +import { useState } from 'react'; +import IconButton from '@mui/material/IconButton'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import MoreVertOutlinedIcon from '@mui/icons-material/MoreVertOutlined'; + +export default function More() { + const [anchorEl, setAnchorEl] = useState(null); + + const handleMenu = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = (event) => { + setAnchorEl(null); + }; + + return ( + <> + + + + + + 檢舉 + + + + ); +} diff --git a/components/Group/detail/OrganizerCard.jsx b/components/Group/detail/OrganizerCard.jsx new file mode 100644 index 00000000..0739ae2c --- /dev/null +++ b/components/Group/detail/OrganizerCard.jsx @@ -0,0 +1,11 @@ +import Avatar from '@mui/material/Avatar'; + +function OrganizerCard() { + return ( +
+ +
+ ); +} + +export default OrganizerCard; diff --git a/components/Group/detail/TeamInfoCard.jsx b/components/Group/detail/TeamInfoCard.jsx new file mode 100644 index 00000000..a04c5a0c --- /dev/null +++ b/components/Group/detail/TeamInfoCard.jsx @@ -0,0 +1,78 @@ +import dayjs from 'dayjs'; +import styled from '@emotion/styled'; +import bachelorCapSvg from '@/public/assets/icons/bachelorCap.svg'; +import categorySvg from '@/public/assets/icons/category.svg'; +import clockSvg from '@/public/assets/icons/clock.svg'; +import locationSvg from '@/public/assets/icons/location.svg'; +import personSvg from '@/public/assets/icons/person.svg'; + +const StyledItem = styled.div` + padding: 7px 0; + display: flex; + + h3 { + display: flex; + align-items: center; + flex: 0 0 140px; + font-size: 14px; + font-weight: 500; + color: #293a3d; + gap: 5px; + } + + p { + flex: 1; + font-size: 14px; + font-weight: 400; + color: #536166; + } + + & + & { + border-top: 1px solid #f3f3f3; + } +`; + +const labels = [ + { + key: 'category', + icon: categorySvg.src, + text: '學習領域', + format: (v) => (Array.isArray(v) ? v.join('、') : v), + }, + { key: 'area', icon: locationSvg.src, text: '地點' }, + { + key: 'time', + icon: clockSvg.src, + text: '時間', + format: (v) => dayjs(v).format('YYYY/MM/DD'), + }, + { key: 'partnerStyle', icon: personSvg.src, text: '想找的夥伴' }, + { + key: 'partnerEducationStep', + icon: bachelorCapSvg.src, + text: '適合的教育階段', + }, +]; + +function TeamInfoCard({ data }) { + return ( +
+ {labels.map( + ({ key, icon, text, format }) => + data[key] && ( + +

+ {`${text} + {text} +

+

+ {typeof format === 'function' ? format(data[key]) : data[key]} +

+ + ), + )} +
+ ); +} + +export default TeamInfoCard; diff --git a/components/Group/detail/index.jsx b/components/Group/detail/index.jsx new file mode 100644 index 00000000..37b2944f --- /dev/null +++ b/components/Group/detail/index.jsx @@ -0,0 +1,69 @@ +import Box from '@mui/material/Box'; +import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'; +import Button from '@/shared/components/Button'; +import Image from '@/shared/components/Image'; +import chatSvg from '@/public/assets/icons/chat.svg'; +import { StyledStatus } from '../GroupList/GroupCard.styled'; +import StyledPaper from '../Paper.styled'; +import TeamInfoCard from './TeamInfoCard'; +import OrganizerCard from './OrganizerCard'; +import More from './More'; +import { StyledContainer, StyledHeading, StyledLink } from './Detail.styled'; + +const teamInfoData = { + category: ['類別2', '類別4'], + area: '活動地區', + time: '1214-01-01T00:00:00.000Z', + partnerStyle: '合作夥伴風格', + partnerEducationStep: '合作夥伴教育階段', +}; + +function GroupDetail() { + // const res = fetch( + // '/activity/659aca5d2dee7c7764aebf61', + // ).then((res) => res.json()); + // res.then((data) => data.data[0]).then(console.log); + return ( + + + + + 返回 + + + + 揪團中 + + + 尋找北北基線上自學程式、AI的小夥伴們，標題可能會有一行或是兩行或是到三行，最多總共五十個字 + + + + + + + + + + + + + + ); +} + +export default GroupDetail; diff --git a/components/Group/index.jsx b/components/Group/index.jsx index 6ee2bed2..bf8c4d6d 100644 --- a/components/Group/index.jsx +++ b/components/Group/index.jsx @@ -4,10 +4,11 @@ import AreaChips from './AreaChips'; import Banner from './Banner'; import SearchField from './SearchField'; import SelectedCategory from './SelectedCategory'; +import StyledPaper from './Paper.styled'; import GroupList from './GroupList'; import More from './More'; -const StyledGroup = styled.div` +const StyledContainer = styled.div` position: relative; margin: 70px auto 0; width: 924px; @@ -22,28 +23,20 @@ const StyledGroup = styled.div` } `; -const ContainerWrapper = styled(Box)` - padding: 32px; - border-radius: 20px; - box-shadow: 0px 4px 6px rgba(196, 194, 193, 0.2); - background: #fff; - z-index: 2; -`; - function Group() { return ( - - + + - - + + - - + + ); diff --git a/pages/group/detail/index.jsx b/pages/group/detail/index.jsx new file mode 100644 index 00000000..e4484783 --- /dev/null +++ b/pages/group/detail/index.jsx @@ -0,0 +1,34 @@ +import React, { useMemo } from 'react'; +import { useRouter } from 'next/router'; +import SEOConfig from '@/shared/components/SEO'; +import GroupDetail from '@/components/Group/detail'; +import Navigation from '@/shared/components/Navigation_v2'; +import Footer from '@/shared/components/Footer_v2'; + +function GroupPage() { + const router = useRouter(); + const SEOData = useMemo( + () => ({ + title: '揪團學習列表｜島島阿學', + description: + '「島島阿學」盼能透過建立多元的學習資源網絡，讓自主學習者能找到合適的成長方法，進一步成為自己想成為的人，從中培養共好精神。目前正積極打造「可共編的學習資源平台」。', + keywords: '島島阿學', + author: '島島阿學', + copyright: '島島阿學', + imgLink: 'https://www.daoedu.tw/preview.webp', + link: `${process.env.HOSTNAME}${router?.asPath}`, + }), + [router?.asPath], + ); + + return ( + <> + + + +