feat: Add mygroup in profile and modify style

daodaoedu · Mar 17, 2024 · 176583d · 176583d
1 parent 1485155
commit 176583d
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 64 deletions.
diff --git a/components/Profile/MyGroup/index.jsx b/components/Profile/MyGroup/index.jsx
@@ -21,9 +21,11 @@ const StyledGroupsWrapper = styled.div`
   @media (max-width: 767px) {
     padding: 16px 20px;
   }
+
+  ${(props) => props.sx}
 `;
 
-const MyGroup = () => {
+const MyGroup = ({ hasTitle = true, sx }) => {
   const [response, setResponse] = useState(null);
   const me = useSelector((state) => state.user);
   const { isFetching } = useFetch(`${GROUP_API_URL}/user/${me?._id}`, {
@@ -71,12 +73,15 @@ const MyGroup = () => {
   };
 
   return (
-    <StyledGroupsWrapper>
-      <Typography
-        sx={{ fontSize: '22px', color: '#536166', fontWeight: 700, mb: 1 }}
-      >
-        我的揪團
-      </Typography>
+    <StyledGroupsWrapper sx={sx}>
+      {hasTitle && (
+        <Typography
+          sx={{ fontSize: '22px', color: '#536166', fontWeight: 700, mb: 1 }}
+        >
+          我的揪團
+        </Typography>
+      )}
+
       <Box maxWidth="560px" width="100%">
         {isFetching ? (
           <LoadingCard />

diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx
@@ -21,10 +21,7 @@ const BottonEdit = {
     color: '#16B9B3',
   },
   '@media (max-width: 767px)': {
-    position: 'absolute',
-    right: '25%',
-    top: '252%',
-    width: '160px',
+    display: 'none',
   },
 };
 
@@ -89,46 +86,52 @@ 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;
-  @media (max-width: 767px) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+  flex-direction: column;
+  align-items: flex-start;
   li {
     align-items: center;
     display: flex;
     margin-right: 16px;
-    @media (max-width: 767px) {
-      margin-bottom: 8px;
-    }
+    margin-bottom: 8px;
   }
   li:last-of-type {
-    margin-right: 0;
+    margin-bottom: 0;
   }
   li svg {
     color: #16b9b3;
   }
-  li p {
+  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;
   }
 `;
@@ -206,7 +209,7 @@ function UserCard({
             router.push('/profile');
           }}
         >
-          <EditOutlinedIcon />
+          <EditOutlinedIcon sx={{ color: '#16B9B3' }} />
           編輯
         </Button>
       ) : (
@@ -244,17 +247,29 @@ function UserCard({
       )}
 
       <StyledProfileOther>
-        <StyledProfileSocial style={{ listStyle: 'none', display: 'flex' }}>
+        <StyledProfileSocial style={{ listStyle: 'none' }}>
           {!!contactList.instagram && (
             <li>
               <RiInstagramFill size="20px" />
-              <p>{contactList.instagram}</p>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={`https://www.instagram.com/${contactList.instagram}`}
+              >
+                {contactList.instagram}
+              </a>
             </li>
           )}
           {!!contactList.facebook && (
             <li>
               <FaFacebook size="20px" />
-              <p>{contactList.facebook}</p>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={`https://www.facebook.com/${contactList.facebook}`}
+              >
+                {contactList.facebook}
+              </a>
             </li>
           )}
           {!!contactList.line && (

diff --git a/components/Profile/UserTabs/UserInfoBasic.jsx b/components/Profile/UserTabs/UserInfoBasic.jsx
@@ -0,0 +1,30 @@
+import { StyledPanelBox, StyledPanelText } from './UserTabs.styled';
+
+function UserInfoBasic({ description = '', wantToDoList = [], share = '' }) {
+  return (
+    <StyledPanelBox>
+      <StyledPanelText
+        sx={{ borderBottom: '1px solid #F3F3F3', paddingBottom: '6px' }}
+      >
+        <p>可分享</p>
+        <span>{share || '尚未填寫'}</span>
+      </StyledPanelText>
+      <StyledPanelText
+        sx={{ borderBottom: '1px solid #F3F3F3', padding: '6px 0' }}
+      >
+        <p>想一起</p>
+        <span>{wantToDoList || '尚未填寫'}</span>
+      </StyledPanelText>
+      <StyledPanelText sx={{ paddingTop: '6px' }}>
+        <p>簡介</p>
+        <div>
+          {description
+            ? description.split('\n').map((d) => <span>{d}</span>)
+            : '尚未填寫'}
+        </div>
+      </StyledPanelText>
+    </StyledPanelBox>
+  );
+}
+
+export default UserInfoBasic;
diff --git a/components/Profile/UserTabs/index.jsx b/components/Profile/UserTabs/index.jsx
@@ -4,13 +4,9 @@ import Tab from '@mui/material/Tab';
 import { TabContext } from '@mui/lab';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
-import {
-  StyledTabContextBox,
-  StyledPanelBox,
-  StyledPanelText,
-} from './UserTabs.styled';
+import { StyledTabContextBox } from './UserTabs.styled';
 
-const UserTabs = ({ description = '', wantToDoList = [], share = '' }) => {
+const UserTabs = ({ panels = [] }) => {
   const [value, setValue] = useState('1');
   return (
     <Box
@@ -30,37 +26,22 @@ const UserTabs = ({ description = '', wantToDoList = [], share = '' }) => {
             centered
             sx={{ width: '100%' }}
           >
-            <Tab style={{ flexGrow: 1 }} label="基本資訊" value="1" />
-            <Tab style={{ flexGrow: 1 }} label="推薦的資源" value="2" />
-            <Tab style={{ flexGrow: 1 }} label="發起的揪團" value="3" />
+            {panels.length > 0 &&
+              panels.map((panel) => (
+                <Tab
+                  style={{ flexGrow: 1 }}
+                  label={panel.title}
+                  value={panel.id}
+                />
+              ))}
           </TabList>
         </StyledTabContextBox>
-        <TabPanel value="1" sx={{ padding: '0' }}>
-          <StyledPanelBox>
-            <StyledPanelText
-              sx={{ borderBottom: '1px solid #F3F3F3', paddingBottom: '6px' }}
-            >
-              <p>可分享</p>
-              <span>{share || '尚未填寫'}</span>
-            </StyledPanelText>
-            <StyledPanelText
-              sx={{ borderBottom: '1px solid #F3F3F3', padding: '6px 0' }}
-            >
-              <p>想一起</p>
-              <span>{wantToDoList || '尚未填寫'}</span>
-            </StyledPanelText>
-            <StyledPanelText sx={{ paddingTop: '6px' }}>
-              <p>簡介</p>
-              <span>{description || '尚未填寫'}</span>
-            </StyledPanelText>
-          </StyledPanelBox>
-        </TabPanel>
-        <TabPanel value="2" sx={{ padding: '0' }}>
-          <StyledPanelBox>即將推出，敬請期待</StyledPanelBox>
-        </TabPanel>
-        <TabPanel value="3" sx={{ padding: '0' }}>
-          <StyledPanelBox>即將推出，敬請期待</StyledPanelBox>
-        </TabPanel>
+        {panels.length > 0 &&
+          panels.map((panel) => (
+            <TabPanel value={panel.id} sx={{ padding: '0' }}>
+              {panel.content}
+            </TabPanel>
+          ))}
       </TabContext>
     </Box>
   );

diff --git a/components/Profile/index.jsx b/components/Profile/index.jsx
@@ -3,15 +3,20 @@ import { useRouter } from 'next/router';
 import { Box, Button } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+
 import {
   WANT_TO_DO_WITH_PARTNER,
   ROLE,
   EDUCATION_STAGE,
 } from '@/constants/member';
 import { mapToTable } from '@/utils/helper';
 import SEOConfig from '@/shared/components/SEO';
+import MyGroup from './MyGroup';
 import UserCard from './UserCard';
 import UserTabs from './UserTabs';
+import UserInfoBasic from './UserTabs/UserInfoBasic';
+import { StyledPanelBox } from './UserTabs/UserTabs.styled';
 
 const BottonBack = {
   color: '#536166',
@@ -27,6 +32,22 @@ const BottonBack = {
     position: 'unset',
   },
 };
+const BottonEdit = {
+  display: 'none',
+  '@media (max-width: 767px)': {
+    display: 'flex',
+    width: '100%',
+    color: '#536166',
+    fontSize: '14px',
+    boxShadow: 'unset',
+    borderRadius: '20px',
+    marginTop: '32px',
+    padding: '8px 0',
+    '&:hover': {
+      color: '#16B9B3',
+    },
+  },
+};
 const WANT_TO_DO_WITH_PARTNER_TABLE = mapToTable(WANT_TO_DO_WITH_PARTNER);
 const ROLELIST = mapToTable(ROLE);
 const EDUCATION_STAGE_TABLE = mapToTable(EDUCATION_STAGE);
@@ -128,7 +149,7 @@ const Profile = ({
           />
         )}
       </Box>
-
+      {/* UserTabs */}
       {isLoading ? (
         <Skeleton
           variant="rounded"
@@ -139,12 +160,42 @@ const Profile = ({
       ) : (
         <UserTabs
           isLoading={isLoading}
-          description={selfIntroduction}
-          wantToDoList={wantTodo}
-          share={share}
+          panels={[
+            {
+              id: '1',
+              title: '基本資訊',
+              content: (
+                <UserInfoBasic
+                  description={selfIntroduction}
+                  wantToDoList={wantTodo}
+                  share={share}
+                />
+              ),
+            },
+            {
+              id: '2',
+              title: '推薦的資源',
+              content: <StyledPanelBox>即將推出，敬請期待</StyledPanelBox>,
+            },
+            {
+              id: '3',
+              title: '發起的揪團',
+              content: (
+                <MyGroup
+                  sx={{
+                    maxWidth: '100%',
+                    padding: '40px 30px',
+                    '@media (max-width: 767px)': {
+                      padding: '30px',
+                    },
+                  }}
+                />
+              ),
+            },
+          ]}
         />
       )}
-      {email !== sendEmail && (
+      {email !== sendEmail ? (
         <Button
           sx={{
             width: '160px',
@@ -160,6 +211,17 @@ const Profile = ({
         >
           聯繫夥伴
         </Button>
+      ) : (
+        <Button
+          variant="outlined"
+          sx={BottonEdit}
+          onClick={() => {
+            router.push('/profile');
+          }}
+        >
+          <EditOutlinedIcon sx={{ color: '#16B9B3' }} />
+          編輯
+        </Button>
       )}
     </Box>
   );