diff --git a/components/Profile/UserCard/Dropdown.jsx b/components/Profile/UserCard/Dropdown.jsx new file mode 100644 index 00000000..98ac11e0 --- /dev/null +++ b/components/Profile/UserCard/Dropdown.jsx @@ -0,0 +1,68 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; +import { Box, Button, Menu, MenuItem } from '@mui/material'; +import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded'; +import Icon from '@mui/material/Icon'; + +const StyledMenu = styled((props) => ( + +))(() => ({ + '& .MuiPaper-root': { + borderRadius: 8, + minWidth: 150, + padding: '12px', + boxShadow: '0px 4px 10px 0px rgba(196, 194, 193, 0.40)', + }, + '& .MuiMenu-list': { + padding: '0', + }, + '& .MuiMenuItem-root': { + padding: '8px', + }, +})); + +export default function Dropdown({ sx }) { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + + + + + 檢舉 + + + + ); +} diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx index adcee0d3..0d23864b 100644 --- a/components/Profile/UserCard/index.jsx +++ b/components/Profile/UserCard/index.jsx @@ -1,10 +1,13 @@ -import { Box, Button, Chip, Skeleton, Typography } from '@mui/material'; +import styled from '@emotion/styled'; +import { Box, Chip, Button, Skeleton, Typography } from '@mui/material'; import { LazyLoadImage } from 'react-lazy-load-image-component'; import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; -import moment from 'moment/moment'; +import moment from 'moment'; import { useRouter } from 'next/router'; -import LOCATION from '../../../constants/countries.json'; +import { RiInstagramFill } from 'react-icons/ri'; +import { FaFacebook, FaLine, FaDiscord } from 'react-icons/fa'; +import DropdownMenu from './Dropdown'; const BottonEdit = { color: '#536166', @@ -25,142 +28,173 @@ const BottonEdit = { }, }; +const StyledProfileWrapper = styled(Box)` + width: 720px; + 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; + @media (max-width: 767px) { + flex-direction: column; + } +`; +const StyledProfileSocial = styled.ul` + display: flex; + align-items: center; + @media (max-width: 767px) { + flex-direction: column; + align-items: flex-start; + } + li { + align-items: center; + display: flex; + margin-right: 16px; + @media (max-width: 767px) { + margin-bottom: 8px; + } + } + li:last-of-type { + margin-right: 0; + } + li svg { + color: #16b9b3; + } + li p { + margin-left: 5px; + color: #293a3d; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 140%; + } +`; +const StyledProfileDate = styled.p` + font-size: 12px; + color: #92989a; + font-weight: 400; + line-height: 140%; + @media (max-width: 767px) { + text-align: right; + } +`; + function Tag({ label }) { return ( ); } + +function Avator({ photoURL }) { + return ( + + } + /> + ); +} + function UserCard({ - isLoading, + isLoginUser, tagList, educationStepLabel, photoURL, userName, location, }) { - console.log(educationStepLabel); const router = useRouter(); - if (isLoading) { - return ( - - - - - - - - - {' '} - - - - - - - - - ); - } + return ( - - - - } - /> + + {isLoginUser ? ( + ) : ( + + )} + + + - - {userName || '-'} - - - - - - - + +
+

{userName || '-'}

+ {educationStepLabel} +
+

實驗教育學生

+ + + {' '} - {LOCATION.find( - (item) => item.alpha2 === location || item.alpha3 === location, - )?.name || '-'} - + {location || '-'} + - - - - {tagList.map((tag) => ( - - ))} - - + + + + {tagList.map((tag) => ( + + ))} + + + + +
  • + +

    Chien22

    +
    • +
  • + +

    ene_soew

    +
    • +
  • + +

    Chien12348888

    +
    • +
  • + +

    #Chien22

    +
    • +     + {moment(new Date() - 500 * 60 * 60).fromNow()} -     -     -     + + + ); } diff --git a/components/Profile/UserTabs/UserTabs.styled.jsx b/components/Profile/UserTabs/UserTabs.styled.jsx new file mode 100644 index 00000000..d45d4035 --- /dev/null +++ b/components/Profile/UserTabs/UserTabs.styled.jsx @@ -0,0 +1,45 @@ +import styled from '@emotion/styled'; +import { Box } from '@mui/material'; + +export const StyledTabContextBox = styled(Box)(({ theme }) => ({ + borderBottom: '1px solid #536166', + color: theme.secondary, // Assuming secondary is a valid theme property + borderColor: theme.secondary, // Use borderColor for indicator color + '@media (max-width: 767px)': { + width: '100%', + }, +})); + +export const StyledPanelBox = styled(Box)` + width: 720px; + padding: 40px 30px; + margin-top: '10px'; + @media (max-width: 767px) { + width: 100%; + padding: 30px; + } +`; + +export const StyledPanelText = styled(Box)` + display: flex; + p { + color: #293a3d; + font-weight: 500; + white-space: nowrap; + min-width: 50px; + } + span { + color: #536166; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; + margin-left: 12px; + } + @media (max-width: 767px) { + flex-direction: column; + span { + margin-left: 0px; + } + } +`; diff --git a/components/Profile/UserTabs/index.jsx b/components/Profile/UserTabs/index.jsx index f461aac0..a2d204da 100644 --- a/components/Profile/UserTabs/index.jsx +++ b/components/Profile/UserTabs/index.jsx @@ -1,295 +1,75 @@ -import { Box, Typography, Divider, Skeleton } from '@mui/material'; +import { useState } from 'react'; +import { Box } from '@mui/material'; import Tab from '@mui/material/Tab'; import { TabContext } from '@mui/lab'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; -import { useState } from 'react'; -import { WANT_TO_DO_WITH_PARTNER } from '../../../constants/member'; -import { mapToTable } from '../../../utils/helper'; +import { + StyledTabContextBox, + StyledPanelBox, + StyledPanelText, +} from './UserTabs.styled'; const UserTabs = ({ description = '', wantToLearnList = [], isLoading = false, }) => { - // console.log('description', description); - // console.log('wantToLearnList', wantToLearnList); - const [value, setValue] = useState('1'); - if (isLoading) { - return ( - - - - setValue(newValue)} - aria-label="lab API tabs example" - centered - sx={{ - width: '100%', - }} - > - - - - - - - - - 可分享 - - - - - - - 想一起 - - - - - - - 個人網站 - - - - - - - 簡介 - - - - - - - - - - - - - ); - } + // TODO + console.log(description, wantToLearnList, isLoading); return ( - + setValue(newValue)} - aria-label="lab API tabs example" centered - sx={{ - width: '100%', - }} + sx={{ width: '100%' }} > - - + + + - - - - - - 可分享 - - - - - - - - 想一起 - - - {wantToLearnList - .map((item) => mapToTable(WANT_TO_DO_WITH_PARTNER)[item]) - .join(', ') || '-'} - - - - - - 個人網站 - - - - - - - - 簡介 - - - {description || '-'} - - - + + + + +

    可分享

    + 自學心得 +     + +

    想一起

    + 學習交流、組課、共學、交朋友 +     + +

    簡介

    + + 休學一年，目前是高二自學生，一直在探索自己喜歡什麼， + 喜歡聽音樂，最近要開始準備英文考試中檢 + 有興趣想交流可以來私訊我～ + +     +     - - - 即將推出，敬請期待 - + + 即將推出，敬請期待 + + + 即將推出，敬請期待     diff --git a/components/Profile/index.jsx b/components/Profile/index.jsx index fe27f6f1..119ce3ff 100644 --- a/components/Profile/index.jsx +++ b/components/Profile/index.jsx @@ -1,15 +1,12 @@ -import React, { useMemo, useState, useLayoutEffect } from 'react'; +import { useMemo, useState } from 'react'; import { useRouter } from 'next/router'; import { Box, Button } from '@mui/material'; -import { useAuthState } from 'react-firebase-hooks/auth'; -import { getAuth } from 'firebase/auth'; -import { getFirestore, doc, getDoc } from 'firebase/firestore'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import { CATEGORIES } from '../../constants/member'; -import { mapToTable } from '../../utils/helper'; +// import { CATEGORIES } from '@/constants/member'; +// import { mapToTable } from '@/utils/helper'; +import SEOConfig from '@/shared/components/SEO'; import UserCard from './UserCard'; import UserTabs from './UserTabs'; -import SEOConfig from '../../shared/components/SEO'; import ContactModal from './Contact'; const BottonBack = { @@ -27,41 +24,20 @@ const BottonBack = { }, }; -const Profile = () => { +const Profile = ({ + name, + photoURL, + tagList = [], + educationStepLabel, + location, +}) => { const router = useRouter(); - const auth = getAuth(); - const [user, isLoadingUser] = useAuthState(auth); - const [userName, setUserName] = useState(''); - const [description, setDescription] = useState(''); - const [photoURL, setPhotoURL] = useState(''); - const [location, setLocation] = useState(''); - const [wantToLearnList, setWantToLearnList] = useState([]); - const [interestAreaList, setInterestAreaList] = useState([]); - const [isLoading, setIsLoading] = useState(isLoadingUser); + const [isLoading] = useState(false); const [open, setOpen] = useState(false); - useLayoutEffect(() => { - const db = getFirestore(); - if (!isLoadingUser && user?.uid) { - const docRef = doc(db, 'partnerlist', user?.uid || ''); - getDoc(docRef).then((docSnap) => { - const data = docSnap.data(); - console.log('data', data); - setUserName(data?.userName || ''); - setPhotoURL(data?.photoURL || ''); - setDescription(data?.description || ''); - setWantToLearnList(data?.wantToLearnList || []); - setInterestAreaList(data?.interestAreaList || []); - setLocation(data?.location || ''); - setIsLoading(false); - }); - } - console.log(description); - }, [user, isLoadingUser]); - const SEOData = useMemo( () => ({ - title: `${userName}的小島｜島島阿學`, + title: `${name}的小島｜島島阿學`, description: '「島島阿學」盼能透過建立多元的學習資源網絡，讓自主學習者能找到合適的成長方法，進一步成為自己想成為的人，從中培養共好精神。目前正積極打造「可共編的學習資源平台」。', keywords: '島島阿學', @@ -73,18 +49,19 @@ const Profile = () => { [router?.asPath], ); - const tagList = interestAreaList.map((item) => mapToTable(CATEGORIES)[item]); - return ( { - + + +