diff --git a/components/Group/SearchField/SelectedEducationStep.jsx b/components/Group/SearchField/SelectedEducationStep.jsx index d1f856da..b415449b 100644 --- a/components/Group/SearchField/SelectedEducationStep.jsx +++ b/components/Group/SearchField/SelectedEducationStep.jsx @@ -1,9 +1,7 @@ import Select from '@/shared/components/Select'; -import { EDUCATION_STEP } from '@/constants/member'; +import { EDUCATION_STAGE } from '@/constants/member'; import useSearchParamsManager from '@/hooks/useSearchParamsManager'; -const EduStep = EDUCATION_STEP.slice(0, 7); - export default function SelectedEducationStep() { const QUERY_KEY = 'partnerEducationStep'; const [getSearchParams, pushState] = useSearchParamsManager(); @@ -17,7 +15,7 @@ export default function SelectedEducationStep() { multiple value={getSearchParams(QUERY_KEY)} onChange={handleChange} - items={EduStep} + items={EDUCATION_STAGE} itemLabel="label" itemValue="label" renderValue={(selected) => diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx index db9f4821..69e35242 100644 --- a/components/Group/detail/Contact/index.jsx +++ b/components/Group/detail/Contact/index.jsx @@ -1,6 +1,7 @@ import { useId, useState, forwardRef, useEffect } from 'react'; import { useRouter } from 'next/router'; import { useSelector } from 'react-redux'; +import Link from 'next/link'; import styled from '@emotion/styled'; import { Avatar, @@ -23,6 +24,19 @@ import Feedback from './Feedback'; const ROLELIST = mapToTable(ROLE); +const StyledButton = styled(Button)` + padding: 8px 36px; + line-height: 1.5; + border-radius: 20px; + color: #ffff; + background-color: #16b9b3; + font-size: 16px; + + &:disabled img { + mix-blend-mode: difference; + opacity: 0.3; + } +`; const StyledTitle = styled.label` display: block; color: var(--black-white-gray-dark, #293a3d); @@ -41,6 +55,18 @@ const StyledTextArea = styled(TextareaAutosize)` width: 100%; min-height: 128px; `; +const StyledLink = styled(Link)` + margin-top: 6px; + margin-left: 6px; + display: block; + color: black; + font-size: 12px; +`; +const StyledSpan = styled.span` + padding: 0 2px; + color: #16b9b3; + text-decoration: underline; +`; const Transition = forwardRef((props, ref) => { return ; @@ -48,8 +74,8 @@ const Transition = forwardRef((props, ref) => { function ContactButton({ user, - children, - title, + label, + activityTitle, description, descriptionPlaceholder, isLoading, @@ -66,6 +92,7 @@ function ContactButton({ const descriptionId = `modal-description-${id}`; const messageId = `message-${id}`; const contactId = `contact-${id}`; + const isLogin = !!me?._id; const role = ROLE.find(({ key }) => user?.roleList?.includes(key))?.label || '暫無資料'; @@ -98,7 +125,8 @@ function ContactButton({ photoUrl: me.photoURL, from: me.email, to: user.email, - subject: '【島島阿學】點開 Email，認識新夥伴', + subject: '【島島阿學】點開 Email，揪團有新消息', + activityTitle, title: '你發起的揪團有人來信！', text: message, information: [me.email, contact], @@ -107,21 +135,13 @@ function ContactButton({ useEffect(() => { if (!me?._id && open) router.push('/login'); - }, [me, open, router]); + }, [me?._id, open, router]); return ( - <> - + {label} + + {!isLogin && ( + + 註冊或登入 + 即可聯繫主揪！ + + )} - {title} + {label} setFeedback('')} /> - + ); } diff --git a/components/Group/detail/More.jsx b/components/Group/detail/More.jsx index f2be94b3..d8174dff 100644 --- a/components/Group/detail/More.jsx +++ b/components/Group/detail/More.jsx @@ -41,7 +41,7 @@ export default function More() { > diff --git a/components/Profile/InputTags/index.jsx b/components/Profile/InputTags/index.jsx index cb2b247b..6d0b091f 100644 --- a/components/Profile/InputTags/index.jsx +++ b/components/Profile/InputTags/index.jsx @@ -13,6 +13,7 @@ const Tag = ({ label, onCancel }) => { borderRadius: '4px', padding: '4px 8px', mr: '8px', + mb: '8px', }} > { ); }; -const StyledTagsField = styled(TextField)` +const StyledTagsWrapper = styled(Box)` + width: 100%; + border: 1px solid #dbdbdb; + border-radius: 4px; + align-items: center; + padding: 8px 16px; + min-height: 50px; + div { + &::before { + border-color: transparent; + } + } input { - padding-left: ${({ hasData }) => (hasData ? '0' : '16px')}; + padding: 0; } `; @@ -51,33 +63,38 @@ function InputTags({ value = [], change }) { } } }; + return ( - 0} - fullWidth="true" - placeholder="搜尋或新增標籤" - onKeyDown={keyDownHandle} - className="input-tags" - InputProps={ - value.length && { - startAdornment: ( - - {Array.isArray(value) && - value.map( - (item) => - typeof item === 'string' && ( - change(item)} - /> - ), - )} - - ), - } - } - /> + + + {Array.isArray(value) && + value.map( + (item) => + typeof item === 'string' && ( + change(item)} /> + ), + )} + + + ); } diff --git a/components/Profile/UserCard/Avator.jsx b/components/Profile/UserCard/Avator.jsx new file mode 100644 index 00000000..15a7efd7 --- /dev/null +++ b/components/Profile/UserCard/Avator.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { Skeleton } from '@mui/material'; + +const Avator = ({ photoURL }) => { + return ( + + } + /> + ); +}; + +export default Avator; diff --git a/components/Profile/UserCard/Dropdown.jsx b/components/Profile/UserCard/Dropdown.jsx index 75b971cb..fbd53424 100644 --- a/components/Profile/UserCard/Dropdown.jsx +++ b/components/Profile/UserCard/Dropdown.jsx @@ -61,7 +61,7 @@ export default function Dropdown({ sx }) { { + return ( + + {iconComponent} + + {text} + + + ); +}; + +export default SocialMediaItem; diff --git a/components/Profile/UserCard/Tag.jsx b/components/Profile/UserCard/Tag.jsx new file mode 100644 index 00000000..1a55daf1 --- /dev/null +++ b/components/Profile/UserCard/Tag.jsx @@ -0,0 +1,19 @@ +import { Chip } from '@mui/material'; + +const Tag = ({ label }) => { + return ( + + ); +}; + +export default Tag; diff --git a/components/Profile/UserCard/UserCard.styled.jsx b/components/Profile/UserCard/UserCard.styled.jsx new file mode 100644 index 00000000..8c822526 --- /dev/null +++ b/components/Profile/UserCard/UserCard.styled.jsx @@ -0,0 +1,120 @@ +import styled from '@emotion/styled'; +import { Box, Typography } from '@mui/material'; + +export const StyledProfileWrapper = styled(Box)` + width: 100%; + padding: 30px; + background-color: #fff; + border-radius: 20px; + @media (max-width: 767px) { + width: 100%; + padding: 16px; + } +`; + +export const StyledProfileBaseInfo = styled(Box)` + display: flex; + justify-content: flex-start; + align-items: center; +`; + +export const StyledProfileTitle = styled(Box)` + div { + display: flex; + align-items: center; + } + h2 { + color: #536166; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 120%; + margin-right: 10px; + } + span { + border-radius: 4px; + background: #f3f3f3; + padding: 3px 10px; + } + p { + color: #92989a; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 19.6px */ + } +`; + +export const StyledProfileLocation = styled(Typography)` + margin-top: 12px; + display: flex; + justify-content: flex-start; + align-items: center; + color: #536166; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 140%; /* 16.8px */ +`; + +export const StyledProfileTag = styled(Box)` + margin-top: 24px; + display: flex; + flex-wrap: wrap; +`; + +export const StyledProfileOther = styled(Box)` + margin-top: 24px; + display: flex; + justify-content: space-between; + align-items: flex-end; + @media (max-width: 767px) { + flex-direction: column; + align-items: flex-start; + } +`; + +export const StyledProfileSocial = styled.ul` + display: flex; + align-items: center; + flex-direction: column; + align-items: flex-start; + li { + align-items: center; + display: flex; + margin-right: 16px; + margin-bottom: 8px; + } + li:last-of-type { + margin-bottom: 0; + } + li svg { + color: #16b9b3; + } + li p, + li a { + margin-left: 5px; + color: #293a3d; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 140%; + } + + li a { + color: #16b9b3; + cursor: pointer; + text-decoration: underline; + } +`; + +export const StyledProfileDate = styled.p` + font-size: 12px; + color: #92989a; + font-weight: 400; + line-height: 140%; + @media (max-width: 767px) { + width: 100%; + text-align: right; + } +`; diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx index 6330c0f6..e10a8a37 100644 --- a/components/Profile/UserCard/index.jsx +++ b/components/Profile/UserCard/index.jsx @@ -1,13 +1,25 @@ -import styled from '@emotion/styled'; -import { Box, Chip, Button, Skeleton, Typography } from '@mui/material'; -import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { BASE_URL } from '@/constants/common'; +import { useRouter } from 'next/router'; +import moment from 'moment'; +import { Box, Button } from '@mui/material'; import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; -import moment from 'moment'; -import { useRouter } from 'next/router'; import { RiInstagramFill } from 'react-icons/ri'; import { FaFacebook, FaLine, FaDiscord } from 'react-icons/fa'; import DropdownMenu from './Dropdown'; +import SocialMediaItem from './SocialMediaItem'; +import AvatorComponent from './Avator'; +import Tag from './Tag'; +import { + StyledProfileWrapper, + StyledProfileBaseInfo, + StyledProfileDate, + StyledProfileLocation, + StyledProfileOther, + StyledProfileSocial, + StyledProfileTag, + StyledProfileTitle, +} from './UserCard.styled'; const BottonEdit = { color: '#536166', @@ -25,166 +37,6 @@ const BottonEdit = { }, }; -const StyledProfileWrapper = styled(Box)` - width: 100%; - padding: 30px; - background-color: #fff; - border-radius: 20px; - @media (max-width: 767px) { - width: 100%; - padding: 16px; - } -`; -const StyledProfileBaseInfo = styled(Box)` - display: flex; - justify-content: flex-start; - align-items: center; -`; -const StyledProfileTitle = styled(Box)` - div { - display: flex; - align-items: center; - } - h2 { - color: #536166; - font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 120%; - margin-right: 10px; - } - span { - border-radius: 4px; - background: #f3f3f3; - padding: 3px 10px; - } - p { - color: #92989a; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 140%; /* 19.6px */ - } -`; -const StyledProfileLocation = styled(Typography)` - margin-top: 12px; - display: flex; - justify-content: flex-start; - align-items: center; - color: #536166; - font-size: 12px; - font-style: normal; - font-weight: 500; - line-height: 140%; /* 16.8px */ -`; -const StyledProfileTag = styled(Box)` - margin-top: 24px; - display: flex; - flex-wrap: wrap; -`; -const StyledProfileOther = styled(Box)` - margin-top: 24px; - display: flex; - justify-content: space-between; - align-items: flex-end; - @media (max-width: 767px) { - flex-direction: column; - align-items: flex-start; - } -`; -const StyledProfileSocial = styled.ul` - display: flex; - align-items: center; - flex-direction: column; - align-items: flex-start; - li { - align-items: center; - display: flex; - margin-right: 16px; - margin-bottom: 8px; - } - li:last-of-type { - margin-bottom: 0; - } - li svg { - color: #16b9b3; - } - li p, - li a { - margin-left: 5px; - color: #293a3d; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 140%; - } - - li a { - color: #16b9b3; - cursor: pointer; - text-decoration: underline; - } -`; -const StyledProfileDate = styled.p` - font-size: 12px; - color: #92989a; - font-weight: 400; - line-height: 140%; - @media (max-width: 767px) { - width: 100%; - text-align: right; - } -`; - -function Tag({ label }) { - return ( - - ); -} - -function Avator({ photoURL }) { - return ( - - } - /> - ); -} - function UserCard({ isLoginUser, tagList = [], @@ -217,7 +69,7 @@ function UserCard({ )} - +
@@ -248,29 +100,32 @@ function UserCard({ - {!!contactList.instagram && ( + {!!contactList['聯繫方式'] && (
  • - - {contactList.instagram} + {contactList['聯繫方式']}
    • )} + {!!contactList.instagram && ( + } + /> + )} {!!contactList.facebook && ( -
  • - - - {contactList.facebook} - -
    • + } + /> )} {!!contactList.line && (
  • diff --git a/pages/profile/index.jsx b/pages/profile/index.jsx index 8bb5467b..4ccdb670 100644 --- a/pages/profile/index.jsx +++ b/pages/profile/index.jsx @@ -21,7 +21,7 @@ const HomePageWrapper = styled.div` `; const StyledTab = styled(Tab)(({ isActive, mobileScreen }) => ({ - width: `${mobileScreen ? '50%' : '100%'}`, + width: `${mobileScreen ? '33%' : '100%'}`, color: '#536166', borderRadius: '8px', '&.Mui-selected': { diff --git a/pages/signin/index.jsx b/pages/signin/index.jsx index f2dbf4e1..f57a16ad 100644 --- a/pages/signin/index.jsx +++ b/pages/signin/index.jsx @@ -63,7 +63,11 @@ function EditPage() { const router = useRouter(); const dispatch = useDispatch(); + const { id, token } = router.query; + const { + _id: userId, + token: userToken, birthDay: userBirthDay, gender: userGender, roleList: userRoleList, @@ -72,7 +76,6 @@ function EditPage() { createdDate, updatedDate, } = useSelector((state) => state?.user); - const { id } = router.query; const [isSubscribeEmail, setIsSubscribeEmail] = useState(false); const [birthDay, setBirthDay] = useState(dayjs()); @@ -80,14 +83,17 @@ function EditPage() { const [roleList, setRoleList] = useState([]); const fetchUser = async () => { - dispatch(fetchUserById(id)); + if (!userId) { + dispatch(fetchUserById(id, token)); + } + router.push(`/signin?id=${id}`); }; useEffect(() => { - if (id) { + if (id || token) { fetchUser(); } - }, [id]); + }, [id, token]); useEffect(() => { setBirthDay(userBirthDay ? dayjs(userBirthDay) : dayjs()); diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx index 64e5dbb2..6d158123 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx @@ -37,47 +37,32 @@ const MenuItemWrapper = styled.li` `; const ItemWrapper = styled.div` - font-size: 30px; - padding: 1rem 0; - margin: 0 5%; + font-size: 18px; + padding: 12px 24px; + border-radius: 8px; cursor: pointer; - color: #fafafa; transition: color 0.2s ease-in-out; animation: 0.5s ${slideInFrames} forwards; + color: #536166; ${(props) => css` animation-delay: ${props.delay}; `} &:hover { - color: 'gray'; + background-color: #def5f5; + font-weight: bold; } `; -const LineStyle = styled.div` - width: '90%'; - height: '1px'; - background: '#fafafa'; - margin: '0 auto'; - animation: 0.5s ${shrinkFrames} forwards; - ${(props) => css` - animation-delay: ${props.delay}; - `} -`; - const MenuItem = ({ delay, text, link, onClick }) => { - if (link) { - return ( - - - {text} - - - - ); - } return ( - {text} - + {link ? ( + + {text} + + ) : ( + {text} + )} ); }; diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx index add3b866..2b8c7138 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx @@ -1,45 +1,56 @@ -// import { keyframes, css } from '@emotion/react'; import styled from '@emotion/styled'; -import { Box } from '@mui/material'; -import { useRouter } from 'next/router'; import MenuItem from './MenuItem'; import UserAvatar from '../SubList/UserAvatar'; import { useSelector } from 'react-redux'; +import { Button } from '@mui/material'; +import { BASE_URL } from '@/constants/common'; const MenuWrapper = styled.div` position: fixed; - top: 0; + top: ${(props) => props.shiftTop}; left: 0; - height: ${(props) => (props.open ? '100%' : 0)}; + height: ${(props) => (props.open ? '100dvh' : 0)}; width: 100vw; display: flex; flex-direction: column; - background: #16b9b3; - opacity: 0.95; - color: #fafafa; + background: white; transition: height 0.3s ease; + padding-bottom: ${(props) => (props.open ? '180px' : 0)}; z-index: 100; overflow: auto; `; const MenuListWrapper = styled.div` - padding: 3rem; - margin-top: 30px; + padding: 1rem; position: relative; z-index: 100; + height: inherit; `; -const Menu = ({ open, list, onCloseMenu }) => { - const router = useRouter(); +const MenuDivider = styled.div` + height: 1px; + width: 100%; + background-color: #def5f5; + margin: 1rem 0; +`; +const LoginButton = styled(Button)` + width: 100%; + height: 40px; + padding: 5px 20px; + color: #536166; + font-size: 16px; + line-height: 1.4; + border-radius: 20px; + border: 1px solid #16b9b3; +`; +const Menu = ({ open, list, onCloseMenu, shiftTop = '80px' }) => { const user = useSelector((state) => state.user); - console.log("MenuList", user); return ( - + {open && ( - {list.map((value, index) => { return ( { /> ); })} + + {user._id ? ( + + ) : ( + 登入 + )} )} diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx index 7db6c736..ee6d8bc3 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx @@ -19,7 +19,10 @@ const MobileLinkListWrapper = styled.ul` li { flex: none; width: 100%; - border-bottom: solid 1px white; + } + + li a { + color: #536166; } svg[type='menu']:checked + ul { @@ -39,13 +42,14 @@ const MobileLinkListWrapper = styled.ul` } `; -const MainNav = () => { +const MainNav = ({ shiftTop = 0 }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const avatar = ''; const isUserLogin = true; return ( { +const slideInFrames = keyframes` + 0% { + transform: translateX(-2%); + } + 100% { + transform: translateX(0); + } +`; + +const StyledMenuItem = styled(MenuItem)` + animation: 0.5s ${slideInFrames} forwards; + transition: color 0.2s ease-in-out; + color: #536166; + border-radius: 4px; + ${(props) => css` + animation-delay: ${props.delay}; + min-width: 126px; + padding: ${props.isPadScreen ? '12px 52px' : '12px'}; + font-size: ${props.isPadScreen ? '18px' : '16px'}; + margin-top: ${props.isPadScreen ? '8px' : '0'}; + &:hover { + background-color: #def5f5; + } + `} +`; + +const UserAvatar = ({ onCloseMenu = () => {}, user }) => { + const dispatch = useDispatch(); + const isPadScreen = useMediaQuery('(max-width: 767px)'); + const { push } = useRouter(); - const user = useSelector((state) => state.user); const [isOpenMenu, setIsOpenMenu] = useState(null); - const handleSignOut = () => { - console.log('handleSignOut'); + const logout = () => { + dispatch(userLogout()); + setIsOpenMenu(false); + onCloseMenu(); + push('/'); }; - if (!user._id) { - return ( - { - push('/login'); - }} - > - - - ); - } return ( - - setIsOpenMenu(event.currentTarget)} - onClick={() => { - setIsOpenMenu(false); - push('/profile'); + + setIsOpenMenu(!isOpenMenu)} + > + {user.name && ( + + )} + {isPadScreen && ( + <> + + {user.name} + + {isOpenMenu ? : } + + )} + + - setIsOpenMenu(false)} > - { - setIsOpenMenu(false); - push('/profile'); - }} - > - 個人頁面 - - { - setIsOpenMenu(false); - push('/profile'); - }} - > - 帳號設定 - - { - handleSignOut(); - push('/'); - setIsOpenMenu(false); - }} - > - 登出 - - - + + {[ + { name: '個人資料', id: 'person-setting' }, + { name: '我的揪團', id: 'my-group' }, + { name: '帳號設定', id: 'account-setting' }, + ].map((v, i) => ( + { + setIsOpenMenu(false); + onCloseMenu(); + push('/profile?id=' + v.id); + }} + > + {v.name} + + ))} + + + 登出 + + + + ); }; diff --git a/shared/components/Navigation_v2/MainNav/SubList/index.jsx b/shared/components/Navigation_v2/MainNav/SubList/index.jsx index cde450ff..a3ec13bd 100644 --- a/shared/components/Navigation_v2/MainNav/SubList/index.jsx +++ b/shared/components/Navigation_v2/MainNav/SubList/index.jsx @@ -1,14 +1,10 @@ import React from 'react'; import styled from '@emotion/styled'; import Link from 'next/link'; -import { Typography } from '@mui/material'; -import useFirebase from '../../../../../hooks/useFirebase'; import UserAvatar from './UserAvatar'; -// import { useAuthState } from "react-firebase-hooks/auth"; -// import { signInWithPopup } from "firebase/auth"; -// import { useDispatch, useSelector } from "react-redux"; -// import { userLogin } from "../../../../../redux/actions/user"; -// import { useCollectionData } from "react-firebase-hooks/firestore"; +import { useSelector } from 'react-redux'; +import { Button } from '@mui/material'; +import { BASE_URL } from '@/constants/common'; const LinkListWrapper = styled.ul` display: flex; @@ -50,8 +46,7 @@ const SubListWrapper = styled.div` `; const SubList = () => { - // const dispatch = useDispatch(); - const { auth, user } = useFirebase(); + const user = useSelector((state) => state.user); return ( @@ -64,7 +59,23 @@ const SubList = () => {
  • - + {user._id ? ( + + ) : ( + + )}
    • diff --git a/shared/components/Navigation_v2/MainNav/index.jsx b/shared/components/Navigation_v2/MainNav/index.jsx index 26b8731f..e929694f 100644 --- a/shared/components/Navigation_v2/MainNav/index.jsx +++ b/shared/components/Navigation_v2/MainNav/index.jsx @@ -24,7 +24,7 @@ const BoxWrapper = styled(Box)` } `; -const MainNav = () => { +const MainNav = ({ height }) => { return ( @@ -34,7 +34,7 @@ const MainNav = () => { {/* right list */} {/* mobile only */} - + ); diff --git a/shared/components/Navigation_v2/PromotionBar.jsx b/shared/components/Navigation_v2/PromotionBar.jsx index 8320649a..20aa552b 100644 --- a/shared/components/Navigation_v2/PromotionBar.jsx +++ b/shared/components/Navigation_v2/PromotionBar.jsx @@ -2,6 +2,10 @@ import { useState, useEffect } from 'react'; import styled from '@emotion/styled'; const PromotionBarWrapper = styled.div` + width: 100%; + position: fixed; + top: 0; + padding-bottom: 20px; background-color: #f37b5f; color: #fff; padding: 7px; @@ -46,25 +50,15 @@ const CloseButton = styled.span` } `; -const PromotionBar = ({ link, text }) => { - const [show, setShow] = useState(undefined); - - useEffect(() => { - setShow(true); - }, []); - - const handleClose = () => { - setShow(false); - }; - +const PromotionBar = ({ isShow, link, text, toggleAction }) => { return ( <> - {show && ( + {isShow && ( {text} - + toggleAction(false)} /> )} diff --git a/shared/components/Navigation_v2/index.jsx b/shared/components/Navigation_v2/index.jsx index ba84470c..942dedad 100644 --- a/shared/components/Navigation_v2/index.jsx +++ b/shared/components/Navigation_v2/index.jsx @@ -1,20 +1,23 @@ -import React from 'react'; +import { useEffect, useState } from 'react'; import styled from '@emotion/styled'; import { AppBar } from '@mui/material'; import MainNav from './MainNav'; import PromotionBar from './PromotionBar'; -const NavigationWrapper = styled(AppBar)` - display: flex; - justify-content: center; - align-items: center; - height: 80px; - padding-left: 5%; - padding-right: 5%; - .MuiToolbar-root { - padding: 0; - } -`; +const NavigationWrapper = styled(AppBar)(({ hasPromote }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '80px', + padding: '0 5%', + ...(hasPromote && { + padding: '38px 5% 0', + height: '118px', + }), + '.MuiToolbar-root': { + padding: '0', + }, +})); const donateTexts = [ '✨島島阿學需要你的支持，讓人人都享有同等資源✨', @@ -32,12 +35,19 @@ const buildRandomText = () => { // `; // 問卷 https://docs.google.com/forms/d/e/1FAIpQLSeyU9-Q-kIWp5uutcik3h-RO4o5VuG6oG0m-4u1Ua18EOu3aw/viewform const Navigation = () => { + const [showPromotetionBar, setShowPromotionBar] = useState(true); + return ( <> - - + + {/* */} - + {/* */}