Merge pull request #8 from Jim-Hodapp-Coaching/5-create-a-standard-lo…

…gin-screen-using-material-ui-components

package.json

@@ -9,16 +9,33 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/cache": "11.10.5",
     "@emotion/react": "^11.11.1",
+    "@emotion/server": "11.10.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
+    "@heroicons/react": "2.0.16",
+    "@mui/lab": "5.0.0-alpha.120",
     "@mui/material": "^5.14.18",
-    "next": "14.0.1",
+    "@mui/system": "5.11.9",
+    "@mui/x-date-pickers": "5.0.19",
+    "apexcharts": "3.37.0",
+    "date-fns": "2.29.3",
+    "formik": "2.2.9",
+    "nprogress": "0.2.0",
+    "prop-types": "15.8.1",
+    "next": "^14.0.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-apexcharts": "1.4.0",
+    "react-dom": "^18",
+    "simplebar-react": "^3.2.1",
+    "yup": "1.0.0"
+
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/nprogress": "0.2.0",
+    "@types/numeral": "2.0.2",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 }

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Devias Kit",
+  "name": "Devias Kit",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/components/chart.js

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic';
+import { styled } from '@mui/material/styles';
+
+const ApexChart = dynamic(() => import('react-apexcharts'), {
+  ssr: false,
+  loading: () => null
+});
+
+export const Chart = styled(ApexChart)``;

src/components/logo.js

@@ -0,0 +1,26 @@
+import { useTheme } from '@mui/material/styles';
+
+export const Logo = () => {
+  const theme = useTheme();
+  const fillColor = theme.palette.primary.main;
+
+  return (
+    <svg
+      fill="none"
+      height="100%"
+      viewBox="0 0 24 24"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        opacity={0.16}
+        d="M7.242 11.083c.449-1.674 2.17-3.394 3.843-3.843l10.434-2.796c1.673-.448 2.666.545 2.218 2.218L20.94 17.096c-.449 1.674-2.17 3.394-3.843 3.843L6.664 23.735c-1.673.448-2.666-.545-2.218-2.218l2.796-10.434Z"
+        fill={fillColor}
+      />
+      <path
+        d="M3.06 6.9c.448-1.674 2.168-3.394 3.842-3.843L17.336.261c1.673-.448 2.667.545 2.218 2.218l-2.796 10.434c-.449 1.674-2.169 3.394-3.843 3.843L2.481 19.552C.808 20-.185 19.007.263 17.334L3.06 6.9Z"
+        fill={fillColor}
+      />
+    </svg>
+  );
+};

src/components/scrollbar.js

@@ -0,0 +1,4 @@
+import SimpleBar from 'simplebar-react';
+import { styled } from '@mui/material/styles';
+
+export const Scrollbar = styled(SimpleBar)``;

src/components/severity-pill.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const SeverityPillRoot = styled('span')(({ theme, ownerState }) => {
+  const backgroundColor = theme.palette[ownerState.color].alpha12;
+  const color = theme.palette.mode === 'dark'
+    ? theme.palette[ownerState.color].main
+    : theme.palette[ownerState.color].dark;
+
+  return {
+    alignItems: 'center',
+    backgroundColor,
+    borderRadius: 12,
+    color,
+    cursor: 'default',
+    display: 'inline-flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: 2,
+    fontWeight: 600,
+    justifyContent: 'center',
+    letterSpacing: 0.5,
+    minWidth: 20,
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    textTransform: 'uppercase',
+    whiteSpace: 'nowrap'
+  };
+});
+
+export const SeverityPill = (props) => {
+  const { color = 'primary', children, ...other } = props;
+
+  const ownerState = { color };
+
+  return (
+    <SeverityPillRoot
+      ownerState={ownerState}
+      {...other}
+    >
+      {children}
+    </SeverityPillRoot>
+  );
+};
+
+SeverityPill.propTypes = {
+  children: PropTypes.node,
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'error',
+    'info',
+    'warning',
+    'success'
+  ])
+};