diff --git a/.eslintrc.json b/.eslintrc.json index b72a2f1..59415fb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,7 +3,20 @@ "browser": true, "es2021": true }, - "extends": ["plugin:react/recommended", "airbnb", "prettier"], + "extends": [ + "plugin:react/recommended", + "airbnb" + ], + "globals": { + "JSX": true + }, + "ignorePatterns": [ + "src/assets", + "src/components", + "src/context", + "src/examples", + "src/layouts" + ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { @@ -12,37 +25,68 @@ "ecmaVersion": "latest", "sourceType": "module" }, - "plugins": ["react", "@typescript-eslint", "prettier"], + "plugins": [ + "react", + "@typescript-eslint" + ], "rules": { - "prettier/prettier": [ + "brace-style": [ + 2, + "allman" + ], + "indent": [ "error", + 3 + ], + "import/extensions": [ + "error", + "ignorePackages", { - "endOfLine": "auto" + "ts": "never", + "tsx": "never", + "js": "never" } ], + "import/no-extraneous-dependencies": [ + "error", + { + "devDependencies": true + } + ], + "max-len": "off", "no-console": "off", - "react/prop-types": "off", "no-shadow": "off", "no-unused-vars": "off", "no-plusplus": "off", "spaced-comment": "off", "object-shorthand": "off", + "react/prop-types": "off", + "react/jsx-filename-extension": [ + "warn", + { + "extensions": [ + ".tsx" + ] + } + ], + "react/jsx-indent": [ + "error", + 3 + ], + "react/jsx-indent-props": [ + "error", + 3 + ], "react/jsx-props-no-spreading": "off", "react/react-in-jsx-scope": "off", - "import/extensions": [ + "quotes": [ "error", - "ignorePackages", - { "ts": "never", "tsx": "never", "js": "never" } - ], - "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }], - "import/no-extraneous-dependencies": ["error", { "devDependencies": true }] + "double" + ] }, "settings": { "import/resolver": { "typescript": {} } - }, - "globals": { - "JSX": true } } diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index f553e50..0000000 --- a/.prettierrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "printWidth": 100, - "trailingComma": "es5", - "semi": true, - "singleQuote": false, - "endOfLine": "auto" -} diff --git a/package-lock.json b/package-lock.json index dbf124e..c0b5285 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,14 +63,11 @@ "@typescript-eslint/parser": "5.10.2", "eslint": "8.8.0", "eslint-config-airbnb": "19.0.4", - "eslint-config-prettier": "8.3.0", "eslint-import-resolver-typescript": "2.5.0", "eslint-plugin-import": "2.25.4", "eslint-plugin-jsx-a11y": "6.5.1", - "eslint-plugin-prettier": "4.0.0", "eslint-plugin-react": "7.28.0", "eslint-plugin-react-hooks": "4.3.0", - "prettier": "2.5.1", "typescript": "^4.7.3" } }, @@ -7533,18 +7530,6 @@ "semver": "bin/semver.js" } }, - "node_modules/eslint-config-prettier": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", - "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", - "dev": true, - "bin": { - "eslint-config-prettier": "bin/cli.js" - }, - "peerDependencies": { - "eslint": ">=7.0.0" - } - }, "node_modules/eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", @@ -7756,27 +7741,6 @@ "node": ">=6.0" } }, - "node_modules/eslint-plugin-prettier": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz", - "integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==", - "dev": true, - "dependencies": { - "prettier-linter-helpers": "^1.0.0" - }, - "engines": { - "node": ">=6.0.0" - }, - "peerDependencies": { - "eslint": ">=7.28.0", - "prettier": ">=2.0.0" - }, - "peerDependenciesMeta": { - "eslint-config-prettier": { - "optional": true - } - } - }, "node_modules/eslint-plugin-react": { "version": "7.28.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz", @@ -8363,12 +8327,6 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, - "node_modules/fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, "node_modules/fast-glob": { "version": "3.2.11", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", @@ -13484,30 +13442,6 @@ "node": ">= 0.8.0" } }, - "node_modules/prettier": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", - "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", - "dev": true, - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "dependencies": { - "fast-diff": "^1.1.2" - }, - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -22393,12 +22327,6 @@ } } }, - "eslint-config-prettier": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", - "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", - "dev": true - }, "eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", @@ -22561,15 +22489,6 @@ } } }, - "eslint-plugin-prettier": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz", - "integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==", - "dev": true, - "requires": { - "prettier-linter-helpers": "^1.0.0" - } - }, "eslint-plugin-react": { "version": "7.28.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz", @@ -22955,12 +22874,6 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, - "fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, "fast-glob": { "version": "3.2.11", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", @@ -26510,21 +26423,6 @@ "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, - "prettier": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", - "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", - "dev": true - }, - "prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "requires": { - "fast-diff": "^1.1.2" - } - }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index f0d6140..3b12da1 100644 --- a/package.json +++ b/package.json @@ -87,14 +87,11 @@ "@typescript-eslint/parser": "5.10.2", "eslint": "8.8.0", "eslint-config-airbnb": "19.0.4", - "eslint-config-prettier": "8.3.0", "eslint-import-resolver-typescript": "2.5.0", "eslint-plugin-import": "2.25.4", "eslint-plugin-jsx-a11y": "6.5.1", - "eslint-plugin-prettier": "4.0.0", "eslint-plugin-react": "7.28.0", "eslint-plugin-react-hooks": "4.3.0", - "prettier": "2.5.1", "typescript": "^4.7.3" }, "main": "qqq-frontend-material-dashboard.js", diff --git a/src/App.tsx b/src/App.tsx index f37268e..b654dd8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,16 +14,18 @@ Coded by www.creative-tim.com */ import React, { - useState, - useEffect, - JSXElementConstructor, - Key, - ReactElement, - useReducer, + useState, + useEffect, + JSXElementConstructor, + Key, + ReactElement, + useReducer, } from "react"; // react-router components -import { Routes, Route, Navigate, useLocation } from "react-router-dom"; +import { + Routes, Route, Navigate, useLocation, +} from "react-router-dom"; // @mui material components import { ThemeProvider } from "@mui/material/styles"; @@ -58,128 +60,137 @@ import EntityView from "./qqq/pages/entity-view"; import EntityEdit from "./qqq/pages/entity-edit"; import ProcessRun from "./qqq/pages/process-run"; -export default function App() { - const [controller, dispatch] = useMaterialUIController(); - const { - miniSidenav, - direction, - layout, - openConfigurator, - sidenavColor, - transparentSidenav, - whiteSidenav, - darkMode, - } = controller; - const [onMouseEnter, setOnMouseEnter] = useState(false); - const { pathname } = useLocation(); +export default function App() +{ + const [controller, dispatch] = useMaterialUIController(); + const { + miniSidenav, + direction, + layout, + openConfigurator, + sidenavColor, + transparentSidenav, + whiteSidenav, + darkMode, + } = controller; + const [onMouseEnter, setOnMouseEnter] = useState(false); + const { pathname } = useLocation(); - // Open sidenav when mouse enter on mini sidenav - const handleOnMouseEnter = () => { - if (miniSidenav && !onMouseEnter) { - setMiniSidenav(dispatch, false); - setOnMouseEnter(true); - } - }; + // Open sidenav when mouse enter on mini sidenav + const handleOnMouseEnter = () => + { + if (miniSidenav && !onMouseEnter) + { + setMiniSidenav(dispatch, false); + setOnMouseEnter(true); + } + }; - // Close sidenav when mouse leave mini sidenav - const handleOnMouseLeave = () => { - if (onMouseEnter) { - setMiniSidenav(dispatch, true); - setOnMouseEnter(false); - } - }; + // Close sidenav when mouse leave mini sidenav + const handleOnMouseLeave = () => + { + if (onMouseEnter) + { + setMiniSidenav(dispatch, true); + setOnMouseEnter(false); + } + }; - // Change the openConfigurator state - const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + // Change the openConfigurator state + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); - // Setting the dir attribute for the body element - useEffect(() => { - document.body.setAttribute("dir", direction); - }, [direction]); + // Setting the dir attribute for the body element + useEffect(() => + { + document.body.setAttribute("dir", direction); + }, [direction]); - // Setting page scroll to 0 when changing the route - useEffect(() => { - document.documentElement.scrollTop = 0; - document.scrollingElement.scrollTop = 0; - }, [pathname]); + // Setting page scroll to 0 when changing the route + useEffect(() => + { + document.documentElement.scrollTop = 0; + document.scrollingElement.scrollTop = 0; + }, [pathname]); - const getRoutes = (allRoutes: any[]): any => - allRoutes.map( + const getRoutes = (allRoutes: any[]): any => allRoutes.map( (route: { collapse: any; route: string; component: ReactElement>; key: Key; - }) => { - if (route.collapse) { - return getRoutes(route.collapse); - } + }) => + { + if (route.collapse) + { + return getRoutes(route.collapse); + } - if (route.route) { - return ; - } + if (route.route) + { + return ; + } - return null; - } - ); + return null; + }, + ); - const configsButton = ( - - - settings - - - ); + const configsButton = ( + + + settings + + + ); - const entityListElement = ; - const entityCreateElement = ; - const entityViewElement = ; - const entityEditElement = ; - const processRunElement = ; + const entityListElement = ; + const entityCreateElement = ; + const entityViewElement = ; + const entityEditElement = ; + const processRunElement = ; - return ( - - - {layout === "dashboard" && ( - <> - - - {configsButton} - - )} - {layout === "vr" && } - - } /> - ; - ; - ; - ; - ; - {getRoutes(routes)} - - - ); + return ( + + + {layout === "dashboard" && ( + <> + + + {configsButton} + + )} + {layout === "vr" && } + + } /> + + + + + + {getRoutes(routes)} + + + ); } diff --git a/src/index.tsx b/src/index.tsx index ea9bf26..e17877c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,12 +21,12 @@ import App from "App"; import { MaterialUIControllerProvider } from "context"; ReactDOM.render( - - - - - , - document.getElementById("root") + + + + + , + document.getElementById("root"), ); export * from "components/MDButton"; diff --git a/src/page.routes.tsx b/src/page.routes.tsx index 31a2a57..3974ada 100644 --- a/src/page.routes.tsx +++ b/src/page.routes.tsx @@ -13,7 +13,7 @@ Coded by www.creative-tim.com * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -/** +/** All of the routes for the Material Kit 2 PRO React React are added here, You can add a new route, customize the routes and delete the routes here. @@ -39,235 +39,235 @@ Coded by www.creative-tim.com import Icon from "@mui/material/Icon"; const pageRoutes = [ - { - name: "pages", - columns: 3, - rowsPerColumn: 2, - collapse: [ - { - name: "dashboards", - icon: dashboard, - collapse: [ - { - name: "analytics", - route: "/dashboards/analytics", - }, - { - name: "sales", - route: "/dashboards/sales", - }, - ], - }, - { - name: "users", - icon: people, - collapse: [ - { - name: "reports", - route: "/pages/users/reports", - }, - ], - }, - { - name: "extra", - icon: queue_play_next, - collapse: [ - { - name: "pricing page", - route: "/pages/pricing-page", - }, - { name: "RTL", route: "/pages/rtl" }, - { name: "widgets", route: "/pages/widgets" }, - { name: "charts", route: "/pages/charts" }, - { - name: "notfications", - route: "/pages/notifications", - }, - ], - }, - { - name: "projects", - icon: precision_manufacturing, - collapse: [ - { - name: "timeline", - route: "/pages/projects/timeline", - }, - ], - }, - { - name: "account", - icon: account_balance, - collapse: [ - { - name: "settings", - route: "/pages/account/setting", - }, - { - name: "billing", - route: "/pages/account/billing", - }, - { - name: "invoice", - route: "/pages/account/invoice", - }, - ], - }, - { - name: "profile", - icon: badge, - collapse: [ - { - name: "profile overview", - route: "/pages/profile/profile-overview", - }, - { - name: "all projects", - route: "/pages/profile/all-projects", - }, - ], - }, - ], - }, - { - name: "authenticaton", - collapse: [ - { - name: "sign in", - dropdown: true, - icon: login, - collapse: [ - { - name: "basic", - route: "/authentication/sign-in/basic", - }, - { - name: "cover", - route: "/authentication/sign-in/cover", - }, - { - name: "illustration", - route: "/authentication/sign-in/illustration", - }, - ], - }, - { - name: "sign up", - dropdown: true, - icon: assignment, - collapse: [ - { - name: "cover", - route: "/authentication/sign-up/cover", - }, - ], - }, - { - name: "reset password", - dropdown: true, - icon: restart_alt, - collapse: [ - { - name: "cover", - route: "/authentication/reset-password/cover", - }, - ], - }, - ], - }, - { - name: "application", - collapse: [ - { - name: "kanban", - route: "/applications/kanban", - icon: "widgets", - }, - { - name: "wizard", - route: "/applications/wizard", - icon: "import_contacts", - }, - { - name: "data tables", - route: "/applications/data-tables", - icon: "backup_table", - }, - { - name: "calendar", - route: "/applications/calendar", - icon: "event", - }, - ], - }, - { - name: "ecommerce", - columns: 2, - rowsPerColumn: 1, - collapse: [ - { - name: "orders", - icon: shopping_cart, - collapse: [ - { - name: "order list", - route: "/ecommerce/orders/order-list", - }, - { - name: "order details", - route: "/ecommerce/orders/order-details", - }, - ], - }, - { - name: "products", - icon: memory, - collapse: [ - { - name: "new product", - route: "/ecommerce/products/new-product", - }, - { - name: "edit product", - route: "/ecommerce/products/edit-product", - }, - { - name: "product page", - route: "/ecommerce/products/product-page", - }, - ], - }, - ], - }, - { - name: "docs", - collapse: [ - { - name: "getting started", - href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/", - description: "All about overview, quick start, license and contents", - icon: article, - }, - { - name: "foundation", - href: "https://www.creative-tim.com/learning-lab/react/colors/material-dashboard/", - description: "See our colors, icons and typography", - icon: grading, - }, - { - name: "components", - href: "https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/", - description: "Explore our collection of fully designed components", - icon: apps, - }, - { - name: "plugins", - href: "https://www.creative-tim.com/learning-lab/react/datepicker/material-dashboard/", - description: "Check how you can integrate our plugins", - icon: extension, - }, - ], - }, + { + name: "pages", + columns: 3, + rowsPerColumn: 2, + collapse: [ + { + name: "dashboards", + icon: dashboard, + collapse: [ + { + name: "analytics", + route: "/dashboards/analytics", + }, + { + name: "sales", + route: "/dashboards/sales", + }, + ], + }, + { + name: "users", + icon: people, + collapse: [ + { + name: "reports", + route: "/pages/users/reports", + }, + ], + }, + { + name: "extra", + icon: queue_play_next, + collapse: [ + { + name: "pricing page", + route: "/pages/pricing-page", + }, + { name: "RTL", route: "/pages/rtl" }, + { name: "widgets", route: "/pages/widgets" }, + { name: "charts", route: "/pages/charts" }, + { + name: "notfications", + route: "/pages/notifications", + }, + ], + }, + { + name: "projects", + icon: precision_manufacturing, + collapse: [ + { + name: "timeline", + route: "/pages/projects/timeline", + }, + ], + }, + { + name: "account", + icon: account_balance, + collapse: [ + { + name: "settings", + route: "/pages/account/setting", + }, + { + name: "billing", + route: "/pages/account/billing", + }, + { + name: "invoice", + route: "/pages/account/invoice", + }, + ], + }, + { + name: "profile", + icon: badge, + collapse: [ + { + name: "profile overview", + route: "/pages/profile/profile-overview", + }, + { + name: "all projects", + route: "/pages/profile/all-projects", + }, + ], + }, + ], + }, + { + name: "authenticaton", + collapse: [ + { + name: "sign in", + dropdown: true, + icon: login, + collapse: [ + { + name: "basic", + route: "/authentication/sign-in/basic", + }, + { + name: "cover", + route: "/authentication/sign-in/cover", + }, + { + name: "illustration", + route: "/authentication/sign-in/illustration", + }, + ], + }, + { + name: "sign up", + dropdown: true, + icon: assignment, + collapse: [ + { + name: "cover", + route: "/authentication/sign-up/cover", + }, + ], + }, + { + name: "reset password", + dropdown: true, + icon: restart_alt, + collapse: [ + { + name: "cover", + route: "/authentication/reset-password/cover", + }, + ], + }, + ], + }, + { + name: "application", + collapse: [ + { + name: "kanban", + route: "/applications/kanban", + icon: "widgets", + }, + { + name: "wizard", + route: "/applications/wizard", + icon: "import_contacts", + }, + { + name: "data tables", + route: "/applications/data-tables", + icon: "backup_table", + }, + { + name: "calendar", + route: "/applications/calendar", + icon: "event", + }, + ], + }, + { + name: "ecommerce", + columns: 2, + rowsPerColumn: 1, + collapse: [ + { + name: "orders", + icon: shopping_cart, + collapse: [ + { + name: "order list", + route: "/ecommerce/orders/order-list", + }, + { + name: "order details", + route: "/ecommerce/orders/order-details", + }, + ], + }, + { + name: "products", + icon: memory, + collapse: [ + { + name: "new product", + route: "/ecommerce/products/new-product", + }, + { + name: "edit product", + route: "/ecommerce/products/edit-product", + }, + { + name: "product page", + route: "/ecommerce/products/product-page", + }, + ], + }, + ], + }, + { + name: "docs", + collapse: [ + { + name: "getting started", + href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/", + description: "All about overview, quick start, license and contents", + icon: article, + }, + { + name: "foundation", + href: "https://www.creative-tim.com/learning-lab/react/colors/material-dashboard/", + description: "See our colors, icons and typography", + icon: grading, + }, + { + name: "components", + href: "https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/", + description: "Explore our collection of fully designed components", + icon: apps, + }, + { + name: "plugins", + href: "https://www.creative-tim.com/learning-lab/react/datepicker/material-dashboard/", + description: "Check how you can integrate our plugins", + icon: extension, + }, + ], + }, ]; export default pageRoutes; diff --git a/src/qqq/components/BaseLayout/index.tsx b/src/qqq/components/BaseLayout/index.tsx index c00bc40..ca9be95 100644 --- a/src/qqq/components/BaseLayout/index.tsx +++ b/src/qqq/components/BaseLayout/index.tsx @@ -30,41 +30,44 @@ interface Props { children: ReactNode; } -function BaseLayout({ stickyNavbar, children }: Props): JSX.Element { - const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal"); +function BaseLayout({ stickyNavbar, children }: Props): JSX.Element +{ + const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal"); - useEffect(() => { - // A function that sets the orientation state of the tabs. - function handleTabsOrientation() { - return window.innerWidth < breakpoints.values.sm - ? setTabsOrientation("vertical") - : setTabsOrientation("horizontal"); - } + useEffect(() => + { + // A function that sets the orientation state of the tabs. + function handleTabsOrientation() + { + return window.innerWidth < breakpoints.values.sm + ? setTabsOrientation("vertical") + : setTabsOrientation("horizontal"); + } - /** + /** The event listener that's calling the handleTabsOrientation function when resizing the window. */ - window.addEventListener("resize", handleTabsOrientation); + window.addEventListener("resize", handleTabsOrientation); - // Call the handleTabsOrientation function to set the state with the initial value. - handleTabsOrientation(); + // Call the handleTabsOrientation function to set the state with the initial value. + handleTabsOrientation(); - // Remove event listener on cleanup - return () => window.removeEventListener("resize", handleTabsOrientation); - }, [tabsOrientation]); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleTabsOrientation); + }, [tabsOrientation]); - return ( - - - {children} -