From 2c6d268c9de8b0b26a9b3462a4f2f3cac63d8efc Mon Sep 17 00:00:00 2001
From: Sina Rohde <s.rohde@indiscale.com>
Date: Tue, 20 Aug 2024 12:18:53 +0200
Subject: [PATCH] inserted new files for content parts
---
package-lock.json | 71 +++++++++++++++++++++++++++-------
package.json | 3 +-
pages/index.tsx | 45 ++++++---------------
src/components/Content.tsx | 34 ++++++++++++++++
src/components/ContentArea.tsx | 58 +++++++++++++++++++++++++++
5 files changed, 162 insertions(+), 49 deletions(-)
create mode 100644 src/components/Content.tsx
create mode 100644 src/components/ContentArea.tsx
diff --git a/package-lock.json b/package-lock.json
index 6836f21..d60ef17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@auth/unstorage-adapter": "^1.6.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
+ "@fontsource/roboto": "^5.0.14",
"@mui/icons-material": "^5.15.19",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.15.19",
@@ -37,7 +38,7 @@
},
"devDependencies": {
"@next/eslint-plugin-next": "^14.1.0",
- "@openapitools/openapi-generator-cli": "^2.9.0",
+ "@openapitools/openapi-generator-cli": "^2.7.0",
"@types/node": "^18.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
@@ -1097,6 +1098,11 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
+ "node_modules/@fontsource/roboto": {
+ "version": "5.0.14",
+ "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.14.tgz",
+ "integrity": "sha512-zHAxlTTm9RuRn9/StwclFJChf3z9+fBrOxC3fw71htjHP1BgXNISwRjdJtAKAmMe5S2BzgpnjkQR93P9EZYI/Q=="
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1634,14 +1640,13 @@
}
},
"node_modules/@nestjs/axios": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/@nestjs/axios/-/axios-3.0.1.tgz",
- "integrity": "sha512-VlOZhAGDmOoFdsmewn8AyClAdGpKXQQaY1+3PGB+g6ceurGIdTxZgRX3VXc1T6Zs60PedWjg3A82TDOB05mrzQ==",
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@nestjs/axios/-/axios-3.0.2.tgz",
+ "integrity": "sha512-Z6GuOUdNQjP7FX+OuV2Ybyamse+/e0BFdTWBX5JxpBDKA+YkdLynDgG6HTF04zy6e9zPa19UX0WA2VDoehwhXQ==",
"dev": true,
"peerDependencies": {
"@nestjs/common": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
"axios": "^1.3.1",
- "reflect-metadata": "^0.1.12",
"rxjs": "^6.0.0 || ^7.0.0"
}
},
@@ -1911,17 +1916,17 @@
}
},
"node_modules/@openapitools/openapi-generator-cli": {
- "version": "2.12.0",
- "resolved": "https://registry.npmjs.org/@openapitools/openapi-generator-cli/-/openapi-generator-cli-2.12.0.tgz",
- "integrity": "sha512-1msjEK5y5zVNbDvbCQNY5Un7KUdhZ/2fhMGgToOQUF1gQOOHQVZ9ALXJkd9STb+wlV/1Cr/UVM56d85NOUMstA==",
+ "version": "2.13.4",
+ "resolved": "https://registry.npmjs.org/@openapitools/openapi-generator-cli/-/openapi-generator-cli-2.13.4.tgz",
+ "integrity": "sha512-4JKyrk55ohQK2FcuZbPdNvxdyXD14jjOIvE8hYjJ+E1cHbRbfXQXbYnjTODFE52Gx8eAxz8C9icuhDYDLn7nww==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
- "@nestjs/axios": "3.0.1",
+ "@nestjs/axios": "3.0.2",
"@nestjs/common": "10.3.0",
"@nestjs/core": "10.3.0",
"@nuxtjs/opencollective": "0.3.2",
- "axios": "1.6.5",
+ "axios": "1.6.8",
"chalk": "4.1.2",
"commander": "8.3.0",
"compare-versions": "4.1.4",
@@ -1929,6 +1934,7 @@
"console.table": "0.10.0",
"fs-extra": "10.1.0",
"glob": "7.2.3",
+ "https-proxy-agent": "7.0.4",
"inquirer": "8.2.6",
"lodash": "4.17.21",
"reflect-metadata": "0.1.13",
@@ -1946,10 +1952,22 @@
"url": "https://opencollective.com/openapi_generator"
}
},
+ "node_modules/@openapitools/openapi-generator-cli/node_modules/axios": {
+ "version": "1.6.8",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+ "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+ "dev": true,
+ "dependencies": {
+ "follow-redirects": "^1.15.6",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
"node_modules/@openapitools/openapi-generator-cli/node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+ "deprecated": "Glob versions prior to v9 are no longer supported",
"dev": true,
"dependencies": {
"fs.realpath": "^1.0.0",
@@ -3535,6 +3553,18 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
+ "node_modules/agent-base": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+ "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+ "dev": true,
+ "dependencies": {
+ "debug": "^4.3.4"
+ },
+ "engines": {
+ "node": ">= 14"
+ }
+ },
"node_modules/ajv": {
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -3901,11 +3931,11 @@
}
},
"node_modules/axios": {
- "version": "1.6.5",
- "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz",
- "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
+ "version": "1.7.4",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+ "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
"dependencies": {
- "follow-redirects": "^1.15.4",
+ "follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
@@ -7361,6 +7391,19 @@
"node": ">= 0.12.0"
}
},
+ "node_modules/https-proxy-agent": {
+ "version": "7.0.4",
+ "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+ "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+ "dev": true,
+ "dependencies": {
+ "agent-base": "^7.0.2",
+ "debug": "4"
+ },
+ "engines": {
+ "node": ">= 14"
+ }
+ },
"node_modules/human-signals": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
diff --git a/package.json b/package.json
index 1a37b25..1eecb80 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"@auth/unstorage-adapter": "^1.6.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
+ "@fontsource/roboto": "^5.0.14",
"@mui/icons-material": "^5.15.19",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.15.19",
@@ -44,7 +45,7 @@
},
"devDependencies": {
"@next/eslint-plugin-next": "^14.1.0",
- "@openapitools/openapi-generator-cli": "^2.9.0",
+ "@openapitools/openapi-generator-cli": "^2.7.0",
"@types/node": "^18.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
diff --git a/pages/index.tsx b/pages/index.tsx
index 1629ada..20ec9e3 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,26 +1,24 @@
// import * as React from 'react'
-import { experimentalStyled as styled, alpha } from '@mui/material/styles'
+import React, { useContext } from 'react'
+import { useRouter } from 'next/router'
+import { experimentalStyled as styled } from '@mui/material/styles'
import AppBar from '@mui/material/AppBar'
import Box from '@mui/material/Box'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import Paper from '@mui/material/Paper'
-import Grid from '@mui/material/Grid'
import Avatar from '@mui/material/Avatar'
import IconButton from '@mui/material/IconButton'
import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
import { ColorModeContext } from '@contexts'
-import React, { useContext } from 'react'
-import { useRouter } from 'next/router'
import FormControl from '@mui/material/FormControl'
import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import Stack from '@mui/material/Stack'
import Link from 'next/link'
-import QueryPanel from 'src/components/header/QueryPanel'
+import ContentArea from '@components/ContentArea'
-const info = ('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.')
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -40,7 +38,8 @@ export default function Index () {
<Toolbar>
<Avatar
alt="FDO logo graphic"
- src="images/logo-fdo-white.png"></Avatar>
+ src="images/logo-fdo-white.png">
+ </Avatar>
<Typography
variant="h6"
noWrap
@@ -58,7 +57,7 @@ export default function Index () {
alignItems="center"
gap="14px"
>
- <FormControl sx={{ minWidth: 64 }}>
+ <FormControl sx={{ minWidth: 64 }}>
<Select
disableUnderline
defaultValue={currentLocale}
@@ -95,42 +94,20 @@ export default function Index () {
))}
</Select>
</FormControl>
- </Stack>
+ </Stack>
<Stack marginLeft={2}>
- <IconButton
+ <IconButton
color="inherit"
onClick={() => {
setMode()
}}
-
>
{mode === 'dark' ? <LightModeOutlined /> : <DarkModeOutlined />}
</IconButton>
- </Stack>
+ </Stack>
</Toolbar>
</AppBar>
-
- <Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
- <Grid item xs={6}>
- <Item>
- <h1>Projektinfo mit Atomgrafik</h1><br />{info}
-
- </Item>
- <Item>
- <QueryPanel/>
-
- </Item>
- </Grid>
- </Grid>
-
- <Grid container spacing={2} columns={20} justifyContent="center" alignItems="center" marginTop={2}>
- <Grid item xs={6}>
- <Item><h2>Beispiel Use Case 1</h2>{info}<br/>{info}<br/></Item>
- </Grid>
- <Grid item xs={6}>
- <Item><h2>Beispiel Use Case 2</h2>{info}<br/>{info}<br/></Item>
- </Grid>
- </Grid>
+ <ContentArea/>
</Box>
)
}
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
new file mode 100644
index 0000000..5262fe9
--- /dev/null
+++ b/src/components/Content.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export default function Types() {
+ return (
+ <Box sx={{ width: '100%', maxWidth: 500 }}>
+
+
+
+ <Typography variant="subtitle1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur
+ </Typography>
+
+ <Typography variant="body1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+ neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
+ quasi quidem quibusdam.
+ </Typography>
+
+ <Typography variant="button" display="block" gutterBottom>
+ button text
+ </Typography>
+ <Typography variant="caption" display="block" gutterBottom>
+ caption text
+ </Typography>
+ <Typography variant="overline" display="block" gutterBottom>
+ overline text
+ </Typography>
+ </Box>
+ );
+}
\ No newline at end of file
diff --git a/src/components/ContentArea.tsx b/src/components/ContentArea.tsx
new file mode 100644
index 0000000..031a51f
--- /dev/null
+++ b/src/components/ContentArea.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import QueryPanel from './header/QueryPanel';
+import Content from 'src/components/Content';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+
+
+const Item = styled(Paper)(({ theme }) => ({
+ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+ ...theme.typography.body2,
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+}));
+
+export default function RowAndColumnSpacing() {
+ return (
+ <Box alignItems="center">
+ <Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
+ <Grid item xs={6}>
+ <Item>
+ <Typography variant="h3" gutterBottom marginTop={2}>
+ Lorem Ipsum Main Heading
+ </Typography><br/>
+ <Typography variant="body1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+ neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
+ quasi quidem quibusdam.
+ </Typography><br/>
+ <QueryPanel/><br/><br/>
+ <Divider /><br/><br/>
+ <Typography variant="body1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur unde suscipit.
+ </Typography><br/>
+ <Typography variant="button" display="block" gutterBottom fontSize={19}>
+ Enter FDO Manager
+ </Typography>
+ </Item>
+ </Grid>
+ </Grid>
+
+ <Grid container spacing={2} columns={20} justifyContent="center" alignItems="center" marginTop={2}>
+ <Grid item xs={6}>
+ <Item><Content/></Item>
+ </Grid>
+ <Grid item xs={6}>
+ <Item><Content/></Item>
+ </Grid>
+ </Grid>
+ </Box>
+ );
+}
\ No newline at end of file
--
GitLab