Skip to content

Commit

Permalink
Merge pull request #9 from JohnsonMao/feature/group
Browse files Browse the repository at this point in the history
feature: group page and js alias import config
  • Loading branch information
JohnsonMao authored Nov 23, 2023
2 parents 871e62c + 29c4f16 commit bc93ce4
Show file tree
Hide file tree
Showing 26 changed files with 11,306 additions and 6,789 deletions.
22 changes: 21 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,25 @@
}
]
],
"plugins": ["@emotion/babel-plugin"]
"plugins": [
[
"babel-plugin-import",
{
"libraryName": "@mui/material",
"libraryDirectory": "",
"camel2DashComponentName": false
},
"core"
],
[
"babel-plugin-import",
{
"libraryName": "@mui/icons-material",
"libraryDirectory": "",
"camel2DashComponentName": false
},
"icons"
],
"@emotion/babel-plugin"
]
}
16 changes: 9 additions & 7 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@ module.exports = {
node: true,
},
ignorePatterns: ['.eslintrc.js'],
// settings: {
// 'import/resolver': {
// node: {
// extensions: ['.js', '.jsx', '.ts', '.tsx'],
// },
// },
// },
settings: {
'import/resolver': {
alias: {
extensions: ['.js', '.jsx'],
map: [['@', '.']],
},
},
},
rules: {
'react/no-unescaped-entities': 'off',
'@next/next/no-page-custom-font': 'off',
Expand All @@ -41,6 +42,7 @@ module.exports = {
'operator-linebreak': 0,
'function-paren-newline': 0,
'jsx-a11y/click-events-have-key-events': 0,
'jsx-a11y/control-has-associated-label': 0,
'jsx-a11y/no-noninteractive-element-interactions': 0,
'react/jsx-one-expression-per-line': 0,
'no-confusing-arrow': 0,
Expand Down
47 changes: 47 additions & 0 deletions components/Group/AreaChips.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { useCallback, useMemo } from 'react';
import styled from '@emotion/styled';
import { AREAS } from '@/constants/areas';
import useSearchParamsManager from '@/hooks/useSearchParamsManager';
import Chip from '@/shared/components/Chip';

const StyledAreaChips = styled.ul`
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
`;

const AreaChips = () => {
const [getSearchParams, pushState] = useSearchParamsManager();

const currentArea = useMemo(
() =>
getSearchParams('area').filter((area) =>
AREAS.find(({ name }) => name === area),
),
[getSearchParams],
);

const handleClickArea = useCallback(
(event) => {
const targetArea = event.target.parentNode.textContent;
const areas = currentArea.filter((area) => area !== targetArea);

pushState('area', areas.toString());
},
[pushState, currentArea],
);

return (
currentArea.length > 0 && (
<StyledAreaChips>
{currentArea.map((name) => (
<li key={name}>
<Chip value={name} onDelete={handleClickArea} />
</li>
))}
</StyledAreaChips>
)
);
};

export default AreaChips;
74 changes: 74 additions & 0 deletions components/Group/Banner.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { useRouter } from 'next/router';
import styled from '@emotion/styled';
import Button from '@/shared/components/Button';
import groupBannerImg from '@/public/assets/group-banner.png';
import Image from '@/shared/components/Image';

const StyledBanner = styled.div`
position: relative;
picture {
position: absolute;
width: 100%;
top: 0;
height: 398px;
img {
height: inherit;
}
}
h1 {
margin-bottom: 8px;
font-weight: 700;
font-size: 36px;
line-height: 140%;
color: #536166;
}
p {
font-weight: 400;
font-size: 14px;
line-height: 140%;
color: #536166;
}
> div {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 100px;
}
`;

const Banner = () => {
const router = useRouter();

const handleClick = () => {
// TODO: 判斷是否登入決定按鈕導向哪個頁面
router.push('/login');
};

return (
<StyledBanner>
<picture>
<Image
src={groupBannerImg.src}
alt="揪團封面"
height="inherit"
background="linear-gradient(#fcfefe 10%, #e0f1f2 40%)"
borderRadius="0"
/>
</picture>
<div>
<h1>揪團</h1>
<p>想一起組織有趣的活動或學習小組嗎?</p>
<p>註冊並加入我們,然後創建你的活動,讓更多人一起參加!</p>
<Button onClick={handleClick}>我想揪團</Button>
</div>
</StyledBanner>
);
};

export default Banner;
54 changes: 54 additions & 0 deletions components/Group/GroupList/GroupCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
import Image from '@/shared/components/Image';
import {
StyledAreas,
StyledContainer,
StyledFooter,
StyledGroupCard,
StyledInfo,
StyledLabel,
StyledText,
StyledTitle,
} from './GroupCard.styled';

function GroupCard({
photoURL,
photoAlt,
title = '未定義主題',
category = [],
partnerEducationStep,
description,
area,
}) {
return (
<StyledGroupCard>
<Image alt={photoAlt} src={photoURL} />
<StyledContainer>
<StyledTitle>{title}</StyledTitle>
<StyledInfo>
<StyledText>
<StyledLabel>學習領域</StyledLabel>
<span>{category.join('、')}</span>
</StyledText>
<StyledText>
<StyledLabel>適合階段</StyledLabel>
<span>{partnerEducationStep}</span>
</StyledText>
</StyledInfo>
<StyledText lineClamp="2" fontSize="14px">
{description}
</StyledText>
<StyledAreas>
<LocationOnOutlinedIcon fontSize="16px" sx={{ color: '#536166' }} />
<StyledText color="#92989A">{area}</StyledText>
</StyledAreas>
<StyledFooter>
<time>2天前更新</time>
<div>揪團中</div>
</StyledFooter>
</StyledContainer>
</StyledGroupCard>
);
}

export default GroupCard;
104 changes: 104 additions & 0 deletions components/Group/GroupList/GroupCard.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import styled from '@emotion/styled';

export const StyledLabel = styled.span`
flex-basis: 50px;
color: #293a3d;
font-size: 12px;
font-weight: bold;
`;

export const StyledText = styled.div`
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ${(props) => props.lineClamp || '1'};
overflow: hidden;
color: ${(props) => props.color || '#536166'};
font-size: ${(props) => props.fontSize || '12px'};
`;

export const StyledTitle = styled.h2`
font-size: 14px;
font-weight: bold;
line-height: 1.4;
`;

export const StyledInfo = styled.div`
${StyledLabel} {
margin-right: 5px;
padding-right: 5px;
border-right: 1px solid #536166;
}
`;

export const StyledFooter = styled.footer`
display: flex;
justify-content: space-between;
align-items: center;
time,
div {
font-size: 12px;
}
time {
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;
&::before {
content: '';
display: block;
width: 8px;
height: 8px;
background: var(--color);
border-radius: 50%;
}
&.end {
--bg-color: #f3f3f3;
--color: #92989a;
}
}
`;

export const StyledContainer = styled.div`
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
`;

export const StyledAreas = styled.div`
display: flex;
align-items: center;
`;

export const StyledGroupCard = styled.div`
position: relative;
background: #fff;
padding: 0.5rem;
transition: transform 0.15s, box-shadow 0.15s;
border-radius: 4px;
&:hover {
z-index: 1;
transform: scale(1.0125);
box-shadow: 0 0 6px 2px #0001;
}
img {
vertical-align: middle;
}
`;
Loading

1 comment on commit bc93ce4

@vercel
Copy link

@vercel vercel bot commented on bc93ce4 Nov 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

daodao-f2e – ./

daodao-f2e.vercel.app
daodao-f2e-git-dev-daodaoedu.vercel.app
daodao-f2e-daodaoedu.vercel.app

Please sign in to comment.