From 928d8979776b64438cc8983fcb6af3c07f5b4301 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Wed, 15 Nov 2023 22:21:40 +0100 Subject: [PATCH] added custom table component --- pkgs/ui/src/app/layout.tsx | 11 ++-- pkgs/ui/src/app/page.tsx | 2 +- pkgs/ui/src/app/theme/themes.ts | 6 +-- pkgs/ui/src/components/sidebar/index.tsx | 59 ++++++++++++++++----- pkgs/ui/src/components/table/index.tsx | 66 ++++++++++++++++++++++++ pkgs/ui/src/components/table/style.tsx | 23 +++++++++ pkgs/ui/src/types/index.ts | 10 ++++ pkgs/ui/tailwind.config.js | 1 + pkgs/ui/tsconfig.json | 27 +++++++--- 9 files changed, 177 insertions(+), 28 deletions(-) create mode 100644 pkgs/ui/src/components/table/index.tsx create mode 100644 pkgs/ui/src/components/table/style.tsx create mode 100644 pkgs/ui/src/types/index.ts diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx index 9b2c52f..851ee4a 100644 --- a/pkgs/ui/src/app/layout.tsx +++ b/pkgs/ui/src/app/layout.tsx @@ -47,9 +47,9 @@ export default function RootLayout({ return ( - Clan.lol + Service-Aware Networks - + @@ -72,9 +72,8 @@ export default function RootLayout({ onClose={() => setShowSidebar(false)} />
@@ -89,7 +88,7 @@ export default function RootLayout({
Clan Logo
diff --git a/pkgs/ui/src/app/theme/themes.ts b/pkgs/ui/src/app/theme/themes.ts index 13e7af1..98559f2 100644 --- a/pkgs/ui/src/app/theme/themes.ts +++ b/pkgs/ui/src/app/theme/themes.ts @@ -4,7 +4,7 @@ import { createTheme, } from "@mui/material/styles"; -import colors from "@clan/colors/colors.json"; +import colors from "../../../../theme/src/colors.json"; const { palette, common } = colors.ref; const commonOptions: Partial = { @@ -46,8 +46,8 @@ export const darkTheme = createTheme({ mode: "dark", ...commonPalette, background: { - default: palette.neutral2.value, - paper: palette.neutral5.value, + default: palette.neutral20.value, + paper: palette.neutral50.value, }, common: { black: common.black.value, diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx index c75bfa2..1bdfe6d 100644 --- a/pkgs/ui/src/components/sidebar/index.tsx +++ b/pkgs/ui/src/components/sidebar/index.tsx @@ -8,13 +8,17 @@ import { ListItemText, } from "@mui/material"; import Image from "next/image"; -import { ReactNode } from "react"; +import React, { ReactNode } from "react"; import { tw } from "@/utils/tailwind"; -import AssignmentIndIcon from "@mui/icons-material/AssignmentInd"; + import Link from "next/link"; -import WysiwygIcon from "@mui/icons-material/Wysiwyg"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +import HomeIcon from '@mui/icons-material/Home'; +import HubIcon from '@mui/icons-material/Hub'; +import PersonIcon from '@mui/icons-material/Person'; +import RouterIcon from '@mui/icons-material/Router'; +import StorageIcon from '@mui/icons-material/Storage'; type MenuEntry = { icon: ReactNode; @@ -27,17 +31,41 @@ type MenuEntry = { const menuEntries: MenuEntry[] = [ { - icon: , - label: "Freelance", + icon: , + label: "Home", to: "/", disabled: false, }, { - icon: , - label: "Blog", - to: "/blog", + icon: , + label: "Entities", + to: "/entities", disabled: true, }, + { + icon: , + label: "C1", + to: "/client-1", + disabled: false, + }, + { + icon: , + label: "C2", + to: "/client-2", + disabled: false, + }, + { + icon: , + label: "AP", + to: "/access-point", + disabled: false, + }, + { + icon: , + label: "DLG", + to: "/distributed-ledger-gateway", + disabled: false, + } ]; const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`; @@ -50,17 +78,22 @@ interface SidebarProps { export function Sidebar(props: SidebarProps) { const { show, onClose } = props; + const [activeMenuItem, setActiveMenuItem] = React.useState('/'); + + const handleMenuItemClick = (path: string) => { + setActiveMenuItem(path); + }; + return (