diff --git a/pkgs/ui/next.config.js b/pkgs/ui/next.config.js index a35bfad..bd7fd9e 100644 --- a/pkgs/ui/next.config.js +++ b/pkgs/ui/next.config.js @@ -1,6 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", + images: { unoptimized: true }, }; module.exports = nextConfig; diff --git a/pkgs/ui/nix/pdefs.nix b/pkgs/ui/nix/pdefs.nix index 7a09b4e..69d2bf9 100644 --- a/pkgs/ui/nix/pdefs.nix +++ b/pkgs/ui/nix/pdefs.nix @@ -895,6 +895,37 @@ version = "5.14.3"; }; }; + "@mui/icons-material" = { + "5.14.3" = { + depInfo = { + "@babel/runtime" = { + descriptor = "^7.22.6"; + pin = "7.22.6"; + runtime = true; + }; + }; + fetchInfo = { + narHash = "sha256-wmY7EzOahWuCF2g5vpcOeFZ8+iJKwyFLHsQiXh1R2jY="; + type = "tarball"; + url = "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.3.tgz"; + }; + ident = "@mui/icons-material"; + ltype = "file"; + peerInfo = { + "@mui/material" = { + descriptor = "^5.0.0"; + }; + "@types/react" = { + descriptor = "^17.0.0 || ^18.0.0"; + optional = true; + }; + react = { + descriptor = "^17.0.0 || ^18.0.0"; + }; + }; + version = "5.14.3"; + }; + }; "@mui/material" = { "5.14.3" = { depInfo = { @@ -6643,6 +6674,11 @@ pin = "11.11.0"; runtime = true; }; + "@mui/icons-material" = { + descriptor = "^5.14.3"; + pin = "5.14.3"; + runtime = true; + }; "@mui/material" = { descriptor = "^5.14.3"; pin = "5.14.3"; @@ -6693,6 +6729,14 @@ pin = "8.4.27"; runtime = true; }; + prettier = { + descriptor = "^3.0.1"; + pin = "3.0.1"; + }; + prettier-plugin-tailwindcss = { + descriptor = "^0.4.1"; + pin = "0.4.1"; + }; react = { descriptor = "18.2.0"; pin = "18.2.0"; @@ -6856,6 +6900,9 @@ "node_modules/@mui/core-downloads-tracker" = { key = "@mui/core-downloads-tracker/5.14.3"; }; + "node_modules/@mui/icons-material" = { + key = "@mui/icons-material/5.14.3"; + }; "node_modules/@mui/material" = { key = "@mui/material/5.14.3"; }; @@ -7727,6 +7774,14 @@ "node_modules/prelude-ls" = { key = "prelude-ls/1.2.1"; }; + "node_modules/prettier" = { + dev = true; + key = "prettier/3.0.1"; + }; + "node_modules/prettier-plugin-tailwindcss" = { + dev = true; + key = "prettier-plugin-tailwindcss/0.4.1"; + }; "node_modules/prop-types" = { key = "prop-types/15.8.1"; }; @@ -9062,6 +9117,102 @@ version = "1.2.1"; }; }; + prettier = { + "3.0.1" = { + binInfo = { + binPairs = { + prettier = "bin/prettier.cjs"; + }; + }; + fetchInfo = { + narHash = "sha256-rgaO4WYmjoHtlOu8SnOau8b/O9lIEDtt26ovEY7qseY="; + type = "tarball"; + url = "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz"; + }; + ident = "prettier"; + ltype = "file"; + treeInfo = { }; + version = "3.0.1"; + }; + }; + prettier-plugin-tailwindcss = { + "0.4.1" = { + fetchInfo = { + narHash = "sha256-39DJn6lvrLmDYTN/lXXuWzMC9pLI4+HNrhnHlYuOMRM="; + type = "tarball"; + url = "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz"; + }; + ident = "prettier-plugin-tailwindcss"; + ltype = "file"; + peerInfo = { + "@ianvs/prettier-plugin-sort-imports" = { + descriptor = "*"; + optional = true; + }; + "@prettier/plugin-pug" = { + descriptor = "*"; + optional = true; + }; + "@shopify/prettier-plugin-liquid" = { + descriptor = "*"; + optional = true; + }; + "@shufo/prettier-plugin-blade" = { + descriptor = "*"; + optional = true; + }; + "@trivago/prettier-plugin-sort-imports" = { + descriptor = "*"; + optional = true; + }; + prettier = { + descriptor = "^2.2 || ^3.0"; + }; + prettier-plugin-astro = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-css-order = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-import-sort = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-jsdoc = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-marko = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-organize-attributes = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-organize-imports = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-style-order = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-svelte = { + descriptor = "*"; + optional = true; + }; + prettier-plugin-twig-melody = { + descriptor = "*"; + optional = true; + }; + }; + treeInfo = { }; + version = "0.4.1"; + }; + }; prop-types = { "15.8.1" = { depInfo = { diff --git a/pkgs/ui/package-lock.json b/pkgs/ui/package-lock.json index b683984..9a36af9 100644 --- a/pkgs/ui/package-lock.json +++ b/pkgs/ui/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.3", "@types/node": "20.4.7", "@types/react": "18.2.18", @@ -497,6 +498,31 @@ "url": "https://opencollective.com/mui" } }, + "node_modules/@mui/icons-material": { + "version": "5.14.3", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.3.tgz", + "integrity": "sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw==", + "dependencies": { + "@babel/runtime": "^7.22.6" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { "version": "5.14.3", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.3.tgz", diff --git a/pkgs/ui/package.json b/pkgs/ui/package.json index 1e4c073..4919fc8 100644 --- a/pkgs/ui/package.json +++ b/pkgs/ui/package.json @@ -14,6 +14,7 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.3", "@types/node": "20.4.7", "@types/react": "18.2.18", diff --git a/pkgs/ui/prettier.config.js b/pkgs/ui/prettier.config.js deleted file mode 100644 index a0d9c69..0000000 --- a/pkgs/ui/prettier.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - plugins: [require("prettier-plugin-tailwindcss")], - tailwindFunctions: ['clsx', 'cx'], -}; diff --git a/pkgs/ui/public/logo.svg b/pkgs/ui/public/logo.svg new file mode 100644 index 0000000..e66bb08 --- /dev/null +++ b/pkgs/ui/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pkgs/ui/src/app/dashboard/page.tsx b/pkgs/ui/src/app/dashboard/page.tsx deleted file mode 100644 index 1670f0f..0000000 --- a/pkgs/ui/src/app/dashboard/page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { DashboardCard } from "../../components/card"; -import { Grid } from "@mui/material"; -import { Button } from "@mui/material"; - -export default function Dashboard() { - return ( - - - - - Hallo Mike ! - - - - Server Stats - - - Network Stats - - - - ); -} diff --git a/pkgs/ui/src/app/globals.css b/pkgs/ui/src/app/globals.css index fd81e88..b5c61c9 100644 --- a/pkgs/ui/src/app/globals.css +++ b/pkgs/ui/src/app/globals.css @@ -1,27 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx index 00f1968..4910604 100644 --- a/pkgs/ui/src/app/layout.tsx +++ b/pkgs/ui/src/app/layout.tsx @@ -1,10 +1,15 @@ +"use client"; + import "./globals.css"; -import type { Metadata } from "next"; import localFont from "next/font/local"; import * as React from "react"; +import { CssBaseline, ThemeProvider } from "@mui/material"; +import { ChangeEvent, useState } from "react"; + import { StyledEngineProvider } from "@mui/material/styles"; -import cx from "classnames"; -// import { tw } from "../utils/tailwind"; + +import { darkTheme, lightTheme } from "./theme/themes"; +import { Sidebar } from "@/components/sidebar"; const roboto = localFont({ src: [ @@ -13,49 +18,42 @@ const roboto = localFont({ weight: "400", style: "normal", }, - // { - // path: "./Roboto-Italic.woff2", - // weight: "400", - // style: "italic", - // }, - // { - // path: "./Roboto-Bold.woff2", - // weight: "700", - // style: "normal", - // }, - // { - // path: "./Roboto-BoldItalic.woff2", - // weight: "700", - // style: "italic", - // }, ], }); -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - export default function RootLayout({ children, }: { children: React.ReactNode; }) { + let [useDarkTheme, setUseDarkTheme] = useState(false); + let [theme, setTheme] = useState(useDarkTheme ? darkTheme : lightTheme); + + const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => { + setUseDarkTheme(currentValue); + setTheme(currentValue ? darkTheme : lightTheme); + }; + return ( + + Clan.lol + + + + - - {children} - + + + +
+ +
+
{children}
+
+
+ + ); diff --git a/pkgs/ui/src/app/page.tsx b/pkgs/ui/src/app/page.tsx index 5cb8b62..4918af5 100644 --- a/pkgs/ui/src/app/page.tsx +++ b/pkgs/ui/src/app/page.tsx @@ -1,112 +1,14 @@ -import Image from "next/image"; +import { Button } from "@mui/material"; -export default function Home() { +export default function Dashboard() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - Vercel Logo - -
+
+
+ Welcome to the Dashboard +
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
+ ); } diff --git a/pkgs/ui/src/app/theme/themes.ts b/pkgs/ui/src/app/theme/themes.ts new file mode 100644 index 0000000..fd845de --- /dev/null +++ b/pkgs/ui/src/app/theme/themes.ts @@ -0,0 +1,13 @@ +import { createTheme } from "@mui/material/styles"; + +export const darkTheme = createTheme({ + palette: { + mode: "dark", + }, +}); + +export const lightTheme = createTheme({ + palette: { + mode: "light", + }, +}); diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx new file mode 100644 index 0000000..8418af7 --- /dev/null +++ b/pkgs/ui/src/components/sidebar/index.tsx @@ -0,0 +1,122 @@ +import { + Divider, + List, + ListItem, + ListItemButton, + ListItemIcon, + ListItemText, +} from "@mui/material"; +import Image from "next/image"; +import { ReactNode } from "react"; + +import DashboardIcon from "@mui/icons-material/Dashboard"; +import DevicesIcon from "@mui/icons-material/Devices"; +import LanIcon from "@mui/icons-material/Lan"; +import AppsIcon from "@mui/icons-material/Apps"; +import DesignServicesIcon from "@mui/icons-material/DesignServices"; +import BackupIcon from "@mui/icons-material/Backup"; +import Link from "next/link"; + +type MenuEntry = { + icon: ReactNode; + label: string; + to: string; +} & { + subMenuEntries?: MenuEntry[]; +}; + +const menuEntries: MenuEntry[] = [ + { + icon: , + label: "Dashoard", + to: "/", + }, + { + icon: , + label: "Devices", + to: "/nodes", + }, + { + icon: , + label: "Applications", + to: "/applications", + }, + { + icon: , + label: "Network", + to: "/network", + }, + { + icon: , + label: "Templates", + to: "/templates", + }, + { + icon: , + label: "Backups", + to: "/backups", + }, +]; + +export function Sidebar() { + return ( + + ); +} diff --git a/pkgs/ui/tailwind.config.js b/pkgs/ui/tailwind.config.js index 8cbc3bb..4e6d135 100644 --- a/pkgs/ui/tailwind.config.js +++ b/pkgs/ui/tailwind.config.js @@ -1,22 +1,16 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + corePlugins: { + preflight: false, + }, content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], - important: "#root", + important: "#__next", theme: { - extend: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", - }, - }, + extend: {}, }, plugins: [], - corePlugins: { - preflight: false, - }, };