feat: navigation & initial user table setup

utkarshsiddharth · Jan 3, 2023 · 27b6265 · 27b6265
1 parent 2bfd2b9
commit 27b6265
Show file tree

Hide file tree

Showing 18 changed files with 453 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@emotion/react": "^11.10.5",
     "@mantine/core": "^5.9.6",
     "@mantine/hooks": "^5.9.6",
+    "@mantine/utils": "^5.10.0",
     "@material-tailwind/react": "^1.2.4",
     "@nivo/bar": "^0.80.0",
     "@nivo/core": "^0.80.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,18 @@
 import type { ColorScheme } from '@mantine/core'
 import { ColorSchemeProvider, MantineProvider } from '@mantine/core'
 import { useHotkeys, useLocalStorage } from '@mantine/hooks'
-import React from 'react'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
 
 import Layout from '@/components/Layout/Layout'
-import { About, Home, NotFound } from '@/screens'
+import {
+  About,
+  Dashboard,
+  NotFound,
+  Orders,
+  Payments,
+  ProductAnalytics,
+  Users
+} from '@/screens'
 
 function App() {
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
@@ -31,8 +38,12 @@ function App() {
         <Router>
           <Layout>
             <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/about" element={<About />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/users" element={<Users />} />
+              <Route path="/product/analytics" element={<ProductAnalytics />} />
+              <Route path="/users" element={<About />} />
+              <Route path="/orders" element={<Orders />} />
+              <Route path="/payments" element={<Payments />} />
               <Route path="*" element={<NotFound />} />
             </Routes>
           </Layout>

diff --git a/src/components/Layout/Navbar/NavLinkGroup.tsx b/src/components/Layout/Navbar/NavLinkGroup.tsx
@@ -3,17 +3,14 @@ import {
   Collapse,
   createStyles,
   Group,
-  Text,
   ThemeIcon,
   UnstyledButton
 } from '@mantine/core'
-import type { TablerIcon } from '@tabler/icons'
-import {
-  IconCalendarStats,
-  IconChevronLeft,
-  IconChevronRight
-} from '@tabler/icons'
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons'
 import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+import type { NavLinkType } from '@/types/component.types'
 
 const useStyles = createStyles((theme) => ({
   control: {
@@ -63,38 +60,33 @@ const useStyles = createStyles((theme) => ({
   }
 }))
 
-interface LinksGroupProps {
-  icon: TablerIcon
-  label: string
-  initiallyOpened?: boolean
-  links?: { label: string; link: string }[]
-}
-
 export default function LinksGroup({
   icon: Icon,
   label,
   initiallyOpened,
-  links
-}: LinksGroupProps) {
+  links,
+  link
+}: NavLinkType) {
   const { classes, theme } = useStyles()
   const hasLinks = Array.isArray(links)
   const [opened, setOpened] = useState(initiallyOpened || false)
   const ChevronIcon = theme.dir === 'ltr' ? IconChevronRight : IconChevronLeft
-  const items = (hasLinks ? links : []).map((link) => (
-    <Text<'a'>
-      component="a"
+  const items = (hasLinks ? links : []).map((elLink) => (
+    <UnstyledButton
+      component={Link}
       className={classes.link}
-      href={link.link}
-      key={link.label}
-      onClick={(event) => event.preventDefault()}
+      to={elLink.link}
+      key={elLink.label}
     >
-      {link.label}
-    </Text>
+      {elLink.label}
+    </UnstyledButton>
   ))
 
   return (
     <>
       <UnstyledButton
+        component={Link}
+        to={link || ''}
         onClick={() => setOpened((o) => !o)}
         className={classes.control}
       >
@@ -103,6 +95,7 @@ export default function LinksGroup({
             <ThemeIcon variant="light" size={30}>
               <Icon size={18} />
             </ThemeIcon>
+
             <Box ml="md">{label}</Box>
           </Box>
           {hasLinks && (
@@ -124,17 +117,11 @@ export default function LinksGroup({
   )
 }
 
-const mockdata = {
-  label: 'Releases',
-  icon: IconCalendarStats,
-  links: [
-    { label: 'Upcoming releases', link: '/' },
-    { label: 'Previous releases', link: '/' },
-    { label: 'Releases schedule', link: '/' }
-  ]
+type NavbarLinkGroupType = {
+  data: NavLinkType
 }
 
-export function NavbarLinksGroup() {
+export function NavbarLinksGroup({ data }: NavbarLinkGroupType) {
   return (
     <Box
       sx={(theme) => ({
@@ -144,7 +131,7 @@ export function NavbarLinksGroup() {
           theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white
       })}
     >
-      <LinksGroup {...mockdata} />
+      <LinksGroup {...data} />
     </Box>
   )
 }
diff --git a/src/components/Layout/Navbar/Navbar.tsx b/src/components/Layout/Navbar/Navbar.tsx
@@ -1,55 +1,11 @@
 import { createStyles, Navbar, ScrollArea } from '@mantine/core'
-import {
-  IconAdjustments,
-  IconCalendarStats,
-  IconFileAnalytics,
-  IconGauge,
-  IconLock,
-  IconNotes,
-  IconPresentationAnalytics
-} from '@tabler/icons'
 
 import { ToggleButton } from '@/components/common'
+import { navData } from '@/data/navData'
 
 import LinksGroup from './NavLinkGroup'
 import { UserButton } from './UserButton'
 
-const mockdata = [
-  { label: 'Dashboard', icon: IconGauge },
-  {
-    label: 'Market news',
-    icon: IconNotes,
-    initiallyOpened: true,
-    links: [
-      { label: 'Overview', link: '/' },
-      { label: 'Forecasts', link: '/' },
-      { label: 'Outlook', link: '/' },
-      { label: 'Real time', link: '/' }
-    ]
-  },
-  {
-    label: 'Releases',
-    icon: IconCalendarStats,
-    links: [
-      { label: 'Upcoming releases', link: '/' },
-      { label: 'Previous releases', link: '/' },
-      { label: 'Releases schedule', link: '/' }
-    ]
-  },
-  { label: 'Analytics', icon: IconPresentationAnalytics },
-  { label: 'Contracts', icon: IconFileAnalytics },
-  { label: 'Settings', icon: IconAdjustments },
-  {
-    label: 'Security',
-    icon: IconLock,
-    links: [
-      { label: 'Enable 2FA', link: '/' },
-      { label: 'Change password', link: '/' },
-      { label: 'Recovery codes', link: '/' }
-    ]
-  }
-]
-
 const useStyles = createStyles((theme) => ({
   navbar: {
     backgroundColor:
@@ -89,9 +45,7 @@ const useStyles = createStyles((theme) => ({
 
 export default function NavigationBar() {
   const { classes } = useStyles()
-  const links = mockdata.map((item) => (
-    <LinksGroup {...item} key={item.label} />
-  ))
+  const links = navData.map((item) => <LinksGroup {...item} key={item.label} />)
 
   return (
     <Navbar width={{ sm: 300 }} p="md" className={classes.navbar}>