feat: Manage users component

package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.16.4",
     "@mui/material": "^5.4.0",
     "@mui/styled-engine": "^5.4.0",
     "react": "^18.3.1",

src/App.tsx

@@ -1,5 +1,13 @@
+import React from 'react';
+import { CssBaseline } from '@mui/material';
+import { ManageUsers } from './manageUsers/manageUsers';
 const App = () => {
-  return <h1>Univent Planner</h1>
+  return (
+    <>
+      <CssBaseline />
+      <ManageUsers />
+    </>
+  );
 };
 
 export default App;

src/manageUsers/manageUsers.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import GroupRemoveIcon from '@mui/icons-material/GroupRemove';
+import { BackButton, Item, RemoveButton, Wrapper } from './manageUsersStyle';
+
+export const ManageUsers = () => {
+  function generate(element: React.ReactElement) {
+    return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) =>
+      React.cloneElement(element, {
+        key: value,
+      })
+    );
+  }
+  const [secondary, setSecondary] = React.useState(false);
+  return (
+    <Wrapper>
+      <BackButton>
+        <ArrowBackIcon></ArrowBackIcon>
+      </BackButton>
+      <Typography sx={{ mt: 8, mb: 2, ml: 1 }} variant="h6" component="div">
+        Członkowie
+        <Typography
+          variant="h6"
+          component="div"
+          fontStyle={'italic'}
+          fontWeight={600}
+        >
+          NAZWA_GRUPY
+        </Typography>
+      </Typography>
+      <List>
+        {generate(
+          <Item
+            secondaryAction={
+              <RemoveButton edge="end" aria-label="delete">
+                <GroupRemoveIcon />
+              </RemoveButton>
+            }
+          >
+            <ListItemAvatar>
+              <Avatar src={''}></Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary="Użytkownik"
+              secondary={secondary ? 'Secondary text' : null}
+            />
+          </Item>
+        )}
+      </List>
+    </Wrapper>
+  );
+};

src/manageUsers/manageUsersStyle.ts

@@ -0,0 +1,51 @@
+import { styled } from '@mui/material';
+import { ListItem, IconButton, Box } from '@mui/material';
+
+export const Wrapper = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 32px;
+  box-sizing: border-box;
+  position: relative;
+  @media (max-width: 600px) {
+    padding: 16px;
+  }
+`;
+export const Content = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  padding: 16px;
+  @media (max-width: 600px) {
+    padding: 8px;
+  }
+`;
+
+export const BackButton = styled(IconButton)`\
+    position: absolute;
+    border-radius: 9999px;
+    border: 2px solid #bbbbbb;
+  @media {
+    color: black;
+  }
+`;
+export const RemoveButton = styled(IconButton)`
+  position: relative;
+`;
+
+export const Item = styled(ListItem)`
+    position absolute;
+  background-color: #ffcccc;
+  border-radius: 12px;
+  margin-bottom: 8px;
+`;
+
+export const BackButtonWrapper = styled(Box)`
+  display: flex;
+  justify-content: flex-start;
+  background-color: #;
+`;