Merge pull request #5 from Abusayid693/dashboard

Dashboard
Abusayid693 · May 18, 2022 · 8407828 · 8407828
2 parents 6088365 + 986508c
commit 8407828
Show file tree

Hide file tree

Showing 9 changed files with 245 additions and 103 deletions.
diff --git a/client-ui/components/DashboardSideBar/index.tsx b/client-ui/components/DashboardSideBar/index.tsx
@@ -1,111 +1,145 @@
-import {Asleep20, Logout20} from '@carbon/icons-react';
+import {
+  Dashboard20,
+  DashboardReference20,
+  FolderMoveTo20,
+  Logout20,
+  TableOfContents20
+} from '@carbon/icons-react';
 import {
   Avatar,
   AvatarBadge,
+  Box,
   Button,
   HStack,
   Text,
   useColorMode,
   VStack
 } from '@chakra-ui/react';
 import ThemeToggle from 'components/ThemeSwitch';
+import Link from 'next/link';
+import {ReactNode} from 'react';
 import colors from 'style/mode';
 
-const Index = () => {
-  const {colorMode} = useColorMode();
+const routes = [
+  {
+    name: 'Dashboard',
+    icon: <DashboardReference20 />,
+    routeTo: '/dashboard'
+  },
 
-  return (
-    <VStack
-      bg={colors.fgd_5[colorMode]}
-      w={'200px'}
-      h={'100vh'}
-      position={'relative'}
-    >
-      <VStack marginBottom="10vh" marginTop={'5vh'}>
-        <ThemeToggle />
-      </VStack>
-      <VStack marginBottom="70vh">
-        <Button
-          aria-label=""
-          rightIcon={<Asleep20 />}
-          bg={colors.fgd_6[colorMode]}
-          color={colors.fgd_3[colorMode]}
-          w={'180px'}
-          _hover={{
-            bg: colors.fgd_6[colorMode]
-          }}
-        >
-          Voices
-        </Button>
-        <Button
-          aria-label=""
-          rightIcon={<Asleep20 />}
-          bg={colors.fgd_6[colorMode]}
-          color={colors.fgd_3[colorMode]}
-          w={'180px'}
-          _hover={{
-            bg: colors.fgd_6[colorMode]
-          }}
-        >
-          Voices
-        </Button>
+  {
+    name: 'Saved',
+    icon: <FolderMoveTo20 />,
+    routeTo: '/dashboard/saved'
+  },
+  {
+    name: 'Analytics',
+    icon: <Dashboard20 />,
+    routeTo: '/dashboard/analytics'
+  },
+  {
+    name: 'Voices',
+    icon: <TableOfContents20 />,
+    routeTo: '/dashboard/voices'
+  }
+];
 
-        <Button
-          aria-label=""
-          rightIcon={<Asleep20 />}
-          bg={colors.fgd_6[colorMode]}
-          color={colors.fgd_3[colorMode]}
-          w={'180px'}
-          _hover={{
-            bg: colors.fgd_6[colorMode]
-          }}
-        >
-          Voices
-        </Button>
+const Index: React.FC<{
+  activeIndex: number;
+  children: ReactNode;
+}> = ({activeIndex = 0, children}) => {
+  const {colorMode} = useColorMode();
 
-        <Button
-          aria-label=""
-          rightIcon={<Asleep20 />}
-          bg={colors.fgd_6[colorMode]}
-          color={colors.fgd_3[colorMode]}
-          w={'180px'}
-          _hover={{
-            bg: colors.fgd_6[colorMode]
-          }}
-        >
-          Voices
-        </Button>
-      </VStack>
-      <VStack position={'absolute'} bottom="30">
-        <HStack w={'180px'} marginBottom={4}>
-          <Avatar size="sm">
-            <AvatarBadge boxSize="0.85em" bg="green.500" />
-          </Avatar>
-          <VStack
-            alignItems={'flex-start'}
-            justifyContent="flex-start"
-            textAlign={'left'}
+  return (
+    <HStack justifyContent={'space-between'} bg={colors.fgd_5[colorMode]}>
+      <VStack
+        bg={colors.fgd_5[colorMode]}
+        w={'200px'}
+        h={'100vh'}
+        position={'relative'}
+      >
+        <VStack marginBottom="10vh" marginTop={'5vh'}>
+          <ThemeToggle />
+        </VStack>
+        <VStack marginBottom="70vh">
+          <Text fontSize={15} fontWeight={300} alignSelf={'self-start'}>
+            MENU
+          </Text>
+          {routes.map((item, index) => (
+            <Link href={item.routeTo}>
+              <Button
+                key={item.name}
+                aria-label={`${index}`}
+                leftIcon={item.icon}
+                bg={colors.fgd_6[colorMode]}
+                borderRadius={0}
+                fontSize={14}
+                justifyContent="space-between"
+                color={
+                  activeIndex === index
+                    ? colors.fgd_3[colorMode]
+                    : colors.fgd_7[colorMode]
+                }
+                w={'180px'}
+                borderLeftWidth={2}
+                borderColor={
+                  activeIndex === index
+                    ? colors.fgd_3[colorMode]
+                    : colors.fgd_6[colorMode]
+                }
+                _hover={{
+                  bg: colors.fgd_6[colorMode]
+                }}
+              >
+                {item.name}
+              </Button>
+            </Link>
+          ))}
+        </VStack>
+        <VStack position={'absolute'} bottom="30">
+          <Text fontSize={15} fontWeight={300} alignSelf={'self-start'}>
+            PROFILE
+          </Text>
+          <HStack
+            w={'180px'}
+            marginBottom={4}
+            _hover={{
+              bg: colors.fgd_6[colorMode]
+            }}
+            borderRadius={4}
+            pt={4}
+            pb={4}
+          >
+            <Avatar size="sm">
+              <AvatarBadge boxSize="0.85em" bg="green.500" />
+            </Avatar>
+            <VStack
+              alignItems={'flex-start'}
+              justifyContent="flex-start"
+              textAlign={'left'}
+            >
+              <Text lineHeight={1}>Rehan</Text>
+              <Text fontSize={10} lineHeight={0}>
+                Rehan
+              </Text>
+            </VStack>
+          </HStack>
+          <Button
+            aria-label=""
+            leftIcon={<Logout20 />}
+            bg={colors.fgd_6[colorMode]}
+            color={colors.fgd_3[colorMode]}
+            w={'180px'}
+            _hover={{
+              bg: colors.fgd_6[colorMode]
+            }}
           >
-            <Text lineHeight={1}>Rehan</Text>
-            <Text fontSize={10} lineHeight={0}>
-              Rehan
-            </Text>
-          </VStack>
-        </HStack>
-        <Button
-          aria-label=""
-          rightIcon={<Logout20 />}
-          bg={colors.fgd_6[colorMode]}
-          color={colors.fgd_3[colorMode]}
-          w={'180px'}
-          _hover={{
-            bg: colors.fgd_6[colorMode]
-          }}
-        >
-          Logout
-        </Button>
+            Logout
+          </Button>
+        </VStack>
       </VStack>
-    </VStack>
+      <Box w={'86%'}>{children}</Box>
+    </HStack>
   );
 };
 

diff --git a/client-ui/containers/Editor/indexUI.tsx b/client-ui/containers/Editor/indexUI.tsx
@@ -1,7 +1,6 @@
 import {RepeatIcon} from '@chakra-ui/icons';
 import {Box, Button, Grid, IconButton, useColorMode} from '@chakra-ui/react';
 import {Slider} from 'carbon-components-react';
-import EditorHeading from 'components/EditorHeading';
 import {AudioPlayer, CustomDropdown, Flexbox, TextInputArea} from 'elements';
 import useModalState from 'hooks/useModalState';
 import useTtsVoice from 'hooks/useTtsVoice';
@@ -43,15 +42,15 @@ const EditorUI: React.FC<{
     <Box
       display={'flex'}
       flexDirection="column"
-      padding={'5% 10%'}
-      bg={colors.fgd_2[colorMode]}
+      bg={'transparent'}
+      width={'100%'}
     >
-      <EditorHeading />
+      {/* <EditorHeading /> */}
       <Grid
         templateColumns="repeat(3, 1fr)"
         gridRowGap={30}
         templateRows="repeat(2, 1fr)"
-        bg="black.100"
+        bg={colors.fgd_5[colorMode]}
         p={10}
       >
         <CustomDropdown

diff --git a/client-ui/pages/dashboard/analytics.tsx b/client-ui/pages/dashboard/analytics.tsx
@@ -0,0 +1,26 @@
+import DashboardSideBar from 'components/DashboardSideBar';
+import {useRouter} from 'next/router';
+import useAuth from '../../hooks/useAuth';
+
+const Index = () => {
+  const auth = useAuth();
+  const router = useRouter();
+
+  // useEffect(() => {
+  //   if (!auth.isAuthenticated() && !auth.loading) router.push('/');
+  // }, [auth.isAuthenticated(), auth.loading]);
+
+  return (
+    <>
+      {auth.isAuthenticated() ? (
+        <DashboardSideBar activeIndex={2}>
+          <h1>Please first login</h1>
+        </DashboardSideBar>
+      ) : (
+        <h1>Please first login</h1>
+      )}
+    </>
+  );
+};
+
+export default Index;
diff --git a/client-ui/pages/dashboard/index.tsx b/client-ui/pages/dashboard/index.tsx
@@ -1,4 +1,5 @@
 import DashboardSideBar from 'components/DashboardSideBar';
+import Editor from 'containers/Editor';
 import {useRouter} from 'next/router';
 import useAuth from '../../hooks/useAuth';
 
@@ -7,13 +8,15 @@ const Index = () => {
   const router = useRouter();
 
   // useEffect(() => {
-  //   if (!auth.isAuthenticated()) router.push('/');
-  // }, [auth.isAuthenticated()]);
+  //   if (!auth.isAuthenticated() && !auth.loading) router.push('/');
+  // }, [auth.isAuthenticated(), auth.loading]);
 
   return (
     <>
       {auth.isAuthenticated() ? (
-        <DashboardSideBar />
+        <DashboardSideBar activeIndex={0}>
+          <Editor />
+        </DashboardSideBar>
       ) : (
         <h1>Please first login</h1>
       )}

diff --git a/client-ui/pages/dashboard/saved.tsx b/client-ui/pages/dashboard/saved.tsx
@@ -0,0 +1,26 @@
+import DashboardSideBar from 'components/DashboardSideBar';
+import {useRouter} from 'next/router';
+import useAuth from '../../hooks/useAuth';
+
+const Index = () => {
+  const auth = useAuth();
+  const router = useRouter();
+
+  // useEffect(() => {
+  //   if (!auth.isAuthenticated() && !auth.loading) router.push('/');
+  // }, [auth.isAuthenticated(), auth.loading]);
+
+  return (
+    <>
+      {auth.isAuthenticated() ? (
+        <DashboardSideBar activeIndex={1}>
+          <h1>Please first login</h1>
+        </DashboardSideBar>
+      ) : (
+        <h1>Please first login</h1>
+      )}
+    </>
+  );
+};
+
+export default Index;
diff --git a/client-ui/pages/dashboard/settings.tsx b/client-ui/pages/dashboard/settings.tsx
@@ -0,0 +1,26 @@
+import DashboardSideBar from 'components/DashboardSideBar';
+import {useRouter} from 'next/router';
+import useAuth from '../../hooks/useAuth';
+
+const Index = () => {
+  const auth = useAuth();
+  const router = useRouter();
+
+  // useEffect(() => {
+  //   if (!auth.isAuthenticated() && !auth.loading) router.push('/');
+  // }, [auth.isAuthenticated(), auth.loading]);
+
+  return (
+    <>
+      {auth.isAuthenticated() ? (
+        <DashboardSideBar activeIndex={4}>
+          <h1>Please first login</h1>
+        </DashboardSideBar>
+      ) : (
+        <h1>Please first login</h1>
+      )}
+    </>
+  );
+};
+
+export default Index;
diff --git a/client-ui/pages/dashboard/voices.tsx b/client-ui/pages/dashboard/voices.tsx
@@ -0,0 +1,26 @@
+import DashboardSideBar from 'components/DashboardSideBar';
+import {useRouter} from 'next/router';
+import useAuth from '../../hooks/useAuth';
+
+const Index = () => {
+  const auth = useAuth();
+  const router = useRouter();
+
+  // useEffect(() => {
+  //   if (!auth.isAuthenticated() && !auth.loading) router.push('/');
+  // }, [auth.isAuthenticated(), auth.loading]);
+
+  return (
+    <>
+      {auth.isAuthenticated() ? (
+        <DashboardSideBar activeIndex={3}>
+          <h1>Please first login</h1>
+        </DashboardSideBar>
+      ) : (
+        <h1>Please first login</h1>
+      )}
+    </>
+  );
+};
+
+export default Index;