diff --git a/src/pages/components/DashboardHeader/DashboardHeader.tsx b/src/pages/components/DashboardHeader/DashboardHeader.tsx new file mode 100644 index 00000000..072ca526 --- /dev/null +++ b/src/pages/components/DashboardHeader/DashboardHeader.tsx @@ -0,0 +1,83 @@ +import { ArrowBackIcon, ChevronRightIcon, CopyIcon } from '@chakra-ui/icons'; +import { + Box, + Input, + InputGroup, + InputRightElement, + Text, + Tooltip, + useBreakpointValue, + useToast, +} from '@chakra-ui/react'; +import { useRouter } from 'next/router'; +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +interface DashboardHeaderProps { + pageTitle: string; +} + +const DashboardHeader: React.FC = function Dashboard({ pageTitle }) { + const router = useRouter(); + const { t } = useTranslation('dashboard'); + const [apiKey, setApiKey] = useState(''); + const toast = useToast(); + const ml = useBreakpointValue({ base: 10, lg: 270 }); + const pageHeaderDisplay = useBreakpointValue({ base: 'block', lg: 'flex' }); + + const handleGoBack = () => { + router.back(); + }; + + const handleCopyApiKey = () => { + setApiKey('example-api-key'); + navigator.clipboard.writeText(apiKey); + toast({ + title: t('API key copied'), + description: t('Your API key has been copied to your clipboard.'), + status: 'success', + duration: 5000, + isClosable: true, + }); + }; + + return ( + <> + + + + {t('Back')} + + | + + {t('Dashboard')} {t('App one')} + + + + + {pageTitle} + + + + {/* TODO: Remove hardcoded value */} + + + + + + + + + + ); +}; + +export default DashboardHeader; diff --git a/src/pages/components/DashboardHeader/index.ts b/src/pages/components/DashboardHeader/index.ts new file mode 100644 index 00000000..bdc9e702 --- /dev/null +++ b/src/pages/components/DashboardHeader/index.ts @@ -0,0 +1,3 @@ +import DashboardHeader from './DashboardHeader'; + +export default DashboardHeader; diff --git a/src/pages/components/Sidebar/SidebarContent.tsx b/src/pages/components/Sidebar/SidebarContent.tsx index d641dd0c..96381b94 100644 --- a/src/pages/components/Sidebar/SidebarContent.tsx +++ b/src/pages/components/Sidebar/SidebarContent.tsx @@ -1,8 +1,10 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Box, BoxProps, CloseButton, Flex, Text, useColorModeValue } from '@chakra-ui/react'; import { AtSignIcon, ChatIcon, HamburgerIcon, StarIcon, WarningIcon } from '@chakra-ui/icons'; import { useTranslation } from 'react-i18next'; import Image from 'next/image'; +import { useRouter } from 'next/router'; +import Link from 'next/link'; import SidebarItem from './SidebarItem'; import { LOGO_URL } from '../../../shared/constants/Developers'; @@ -12,7 +14,7 @@ interface SidebarProps extends BoxProps { const SidebarContent: React.FC = function SidebarContent({ onClose }) { const { t } = useTranslation('dashboard'); - + const router = useRouter(); const LinkItems = [ { name: t('Profile'), href: '/profile', icon: }, { name: t('Dashboard'), href: '/dashboard', icon: }, @@ -42,11 +44,20 @@ const SidebarContent: React.FC = function SidebarContent({ onClose {LinkItems.map((link) => ( - - - {link.name} - - + + + + {link.name} + + + ))} ); diff --git a/src/pages/components/Sidebar/SidebarItem.tsx b/src/pages/components/Sidebar/SidebarItem.tsx index 5846a039..eca14600 100644 --- a/src/pages/components/Sidebar/SidebarItem.tsx +++ b/src/pages/components/Sidebar/SidebarItem.tsx @@ -9,9 +9,17 @@ interface SidebarItemProps extends FlexProps { icon: React.ReactElement; href: string; children: React.ReactNode; + activeBgColor?: string; + activeTextColor?: string; } -const SidebarItem: React.FC = function SidebarItem({ icon, href, children }) { +const SidebarItem: React.FC = function SidebarItem({ + icon, + href, + children, + activeBgColor, + activeTextColor, +}) { return ( = function SidebarItem({ icon, hre bg: 'cyan.400', color: 'white', }} + bg={activeBgColor} + color={activeTextColor} > {icon} {children} @@ -33,4 +43,9 @@ const SidebarItem: React.FC = function SidebarItem({ icon, hre ); }; +SidebarItem.defaultProps = { + activeBgColor: 'transparent', + activeTextColor: 'gray.800', +}; + export default SidebarItem; diff --git a/src/pages/components/UserInformation/UserInfo.js b/src/pages/components/UserInformation/UserInfo.js deleted file mode 100644 index 04a80908..00000000 --- a/src/pages/components/UserInformation/UserInfo.js +++ /dev/null @@ -1,13 +0,0 @@ -import { Heading } from '@chakra-ui/react'; -import React from 'react'; - -const UserInfo = () => ( -
- User Information -

Name: David Ndubuisi

-

Email: davydocsurg@gmail.com

-

Total Daily Usage: 54

-
-); - -export default UserInfo; diff --git a/src/pages/components/UserInformation/UserInfo.tsx b/src/pages/components/UserInformation/UserInfo.tsx new file mode 100644 index 00000000..082c5ce5 --- /dev/null +++ b/src/pages/components/UserInformation/UserInfo.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Box, Text, useBreakpointValue } from '@chakra-ui/react'; + +const UserInfo: React.FC = function UserInfo() { + const ml = useBreakpointValue({ base: 10, lg: 260 }); + + return ( + + + + Name: + + + David Egorp + + + + + Email: + + + davibfhsdjfgorp@gmail.com + + + + + Date joined: + + + 20 May, 2023 + + + + ); +}; + +export default UserInfo; diff --git a/src/pages/components/UserInformation/index.js b/src/pages/components/UserInformation/index.ts similarity index 100% rename from src/pages/components/UserInformation/index.js rename to src/pages/components/UserInformation/index.ts diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index d560c29c..c69d4b93 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -1,81 +1,17 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useTranslation } from 'react-i18next'; -import { - Box, - Input, - InputGroup, - InputRightElement, - Text, - useColorModeValue, - Tooltip, - useToast, - useBreakpointValue, -} from '@chakra-ui/react'; -import { ArrowBackIcon, ChevronRightIcon, CopyIcon } from '@chakra-ui/icons'; -import { useRouter } from 'next/router'; +import { Box, Text, useColorModeValue, useBreakpointValue } from '@chakra-ui/react'; import Sidebar from './components/Sidebar'; +import DashboardHeader from './components/DashboardHeader'; const Dashboard: React.FC = function Dashboard() { const { t } = useTranslation('dashboard'); - const router = useRouter(); - const [apiKey, setApiKey] = useState(''); - const toast = useToast(); const ml = useBreakpointValue({ base: 10, lg: 270 }); - const pageHeaderDisplay = useBreakpointValue({ base: 'block', lg: 'flex' }); - - const handleCopyApiKey = () => { - setApiKey('example-api-key'); - navigator.clipboard.writeText(apiKey); - toast({ - title: t('API key copied'), - description: t('Your API key has been copied to your clipboard.'), - status: 'success', - duration: 5000, - isClosable: true, - }); - }; - - const handleGoBack = () => { - router.back(); - }; return ( - - - - {t('Back')} - - | - - {t('Dashboard')} {t('App one')} - - - - - {t('Dashboard')} - - - - {/* TODO: Remove hardcoded value */} - - - - - - - - - + diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx new file mode 100644 index 00000000..6ddca3df --- /dev/null +++ b/src/pages/profile.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box, useColorModeValue } from '@chakra-ui/react'; +import Sidebar from './components/Sidebar'; +import DashboardHeader from './components/DashboardHeader'; +import UserInfo from './components/UserInformation'; + +const Profile: React.FC = function Profile() { + const { t } = useTranslation('dashboard'); + + return ( + + + + + + ); +}; + +export default Profile;