add tabs

unstructuredstudio · Feb 29, 2024 · a90114f · a90114f
1 parent 81a6269
commit a90114f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -1075,6 +1075,12 @@
   },
 
  "activities": {
+  "title": "Activities",
+  "tabs": {
+    "published": "Published",
+    "unpublished": "Unpublished",
+    "ariaLabel": "Activity Tabs"
+  },
    "LinkedProjects": "Linked Projects",
    "errors": {
       "emptyList": "No activities created yet !",

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js
@@ -1,4 +1,15 @@
 const styles = theme => ({
+  tabs: {
+    margin: '2em 0',
+    [theme.breakpoints.up('900')]: {
+      paddingRight: '1em'
+    }
+  },
+  tab: {
+    textTransform: 'none',
+    fontSize: '1.2em',
+    fontWeight: 600
+  },
   activityListContainer: {
     padding: '4em 0',
     width: '70%',

diff --git a/zubhub_frontend/zubhub/src/views/activities/activities.jsx b/zubhub_frontend/zubhub/src/views/activities/activities.jsx
@@ -15,7 +15,8 @@ import styles from '../../assets/js/styles/views/activities/activitiesStyles';
 import { makeStyles } from '@mui/styles';
 import ErrorPage from '../error/ErrorPage';
 import DefaultStyles from '../../assets/js/styles';
-import { Grid, Box, Typography } from '@mui/material';
+import { Grid, Tab, Tabs, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import LoadingPage from '../loading/LoadingPage';
 const useStyles = makeStyles(styles);
 
@@ -25,8 +26,9 @@ function Activities(props) {
   const [loading, setLoading] = useState(true);
   const { activities } = useSelector(state => state);
   let [activityList, setActivityList] = useState([]);
-
+  const [tab, setTab] = useState("published");
   const commonClasses = makeStyles(DefaultStyles)();
+  const { t } = useTranslation();
 
   useEffect(() => {
     setActivityList(activities.all_activities);
@@ -55,6 +57,10 @@ function Activities(props) {
     setLoading(false);
   }, [location]);
 
+  const handleTabChange = (event, newTab) => {
+    setTab(newTab)
+  }
+
   if (loading) {
     return <LoadingPage />;
   } else {
@@ -63,9 +69,20 @@ function Activities(props) {
     } else {
       return (
         <div className={commonClasses.smallScreenPadding}>
-          <Typography style={{ marginBottom: 50 }} className={commonClasses.title1}>
-            Activities
+          <Typography className={commonClasses.title1}>
+            {t('activities.title')}
           </Typography>
+          <Tabs
+            value={tab}
+            onChange={handleTabChange}
+            aria-label={t('activities.tabs.ariaLabel')}
+            indicatorColor="primary"
+            variant="fullWidth"
+            className={classes.tabs}
+          >
+            <Tab value="published" label={`${t('activities.tabs.published')} (${activityList.length})`} className={classes.tab} />
+            <Tab value="unpublished" label={`${t('activities.tabs.unpublished')} (${activityList.length})`} className={classes.tab} />
+          </Tabs>
           <Grid container spacing={3}>
             {activityList &&
               activityList.map((activity, index) => (