feat: Manage group view

.gitignore

@@ -20,4 +20,4 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

index.css

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
+
+html {
+    font-size: 62.5%;
+    font-family: 'Inter', sans-serif;
+  }
+html{ accent-color: }

package.json

@@ -13,10 +13,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/material": "^5.4.0",
+    "@mui/icons-material": "^6.1.0",
+    "@mui/material": "^6.1.0",
     "@mui/styled-engine": "^5.4.0",
     "commitlint": "^19.5.0",
     "react": "^18.3.1",

src/App.tsx

@@ -1,5 +1,14 @@
-const App = () => {
-  return <h1>Univent Planner</h1>;
+import React from 'react';
+import { CssBaseline } from '@mui/material';
+import ZarzdzajGrupami from './screens/ManageGroups/ManageGroups';
+
+const App: React.FC = () => {
+  return (
+    <>
+      <CssBaseline />
+      <ZarzdzajGrupami />
+    </>
+  );
 };
 
 export default App;

src/screens/ManageGroups/GroupManagementStyles.ts

@@ -0,0 +1,97 @@
+import { styled } from '@mui/material';
+import { IconButton, Box } from '@mui/material';
+
+export const styles = {
+  container: {
+    textAlign: 'center',
+    padding: '2rem',
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '1rem 2rem',
+    borderBottom: '2px solid black',
+  },
+  icon: {
+    fontSize: '3rem',
+  },
+  univentLogo: {
+    width: '3rem',
+    height: '3rem',
+  },
+  headerIconsRight: {
+    display: 'flex',
+    gap: '1.5rem',
+  },
+  manageGroups: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '1.5rem',
+    margin: '1rem',
+  },
+  title: {
+    fontSize: '2 rem',
+  },
+  groupCard: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#ffcccc',
+    padding: '1rem',
+    borderRadius: '1rem',
+  },
+  groupInfo: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '1rem',
+  },
+  groupAvatar: {
+    width: '6rem',
+    height: '6rem',
+    backgroundColor: '#ffcccc',
+  },
+  groupName: {
+    fontSize: '1rem',
+  },
+  groupMembers: {
+    color: '#777',
+    fontSize: '0.8rem',
+  },
+  manageButtons: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.5rem',
+    margin: '2rem 0',
+  },
+  manageButton: {
+    padding: '1rem',
+    borderRadius: '1rem',
+    fontSize: '1.2rem',
+    backgroundColor: '#f13d42',
+    fontWeight: 'bold',
+    textTransform: 'none',
+  },
+  buttonColor: {
+    backgroundColor: '#f13d42',
+  },
+};
+
+export const BackButton = styled(IconButton)({
+  borderRadius: '50%',
+  border: '0.2rem solid #bbbbbb',
+  padding: '0.6rem',
+  backgroundColor: '#ffffff',
+  width: '2.5rem',
+  height: '2.5rem',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#000000',
+});
+
+export const BackButtonWrapper = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '1rem',
+  margin: '1rem',
+});

src/screens/ManageGroups/ManageGroups.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { IconButton, Button, Box, Typography, Avatar } from '@mui/material';
+import { Groups, Person, Edit } from '@mui/icons-material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { styles, BackButton, BackButtonWrapper } from './GroupManagementStyles';
+
+const GroupManagement: React.FC = () => {
+  return (
+    <Box sx={styles.container}>
+      <Box sx={styles.header}>
+        <IconButton>
+          <img
+            src="./univent-icon.svg"
+            alt="Univent Logo"
+            style={styles.univentLogo}
+          />
+        </IconButton>
+        <Box sx={styles.headerIconsRight}>
+          <IconButton>
+            <Groups sx={styles.icon} />
+          </IconButton>
+          <IconButton>
+            <Person sx={styles.icon} />
+          </IconButton>
+        </Box>
+      </Box>
+
+      <BackButtonWrapper>
+        <BackButton>
+          <ArrowBackIcon />
+        </BackButton>
+      </BackButtonWrapper>
+
+      <Box sx={styles.manageGroups}>
+        <Typography variant="h5" sx={styles.title}>
+          Zarządzaj grupami
+        </Typography>
+      </Box>
+
+      <Box sx={styles.groupCard}>
+        <Box sx={styles.groupInfo}>
+          <Avatar sx={styles.groupAvatar}>
+            <img
+              src="./group-avatar.png"
+              alt="Group Avatar"
+              style={styles.groupAvatar}
+            />
+          </Avatar>
+          <Box>
+            <Typography sx={styles.groupName}>
+              Informatyka Stosowana 2023
+            </Typography>
+            <Typography sx={styles.groupMembers}>42 członków</Typography>
+          </Box>
+        </Box>
+        <IconButton>
+          <Edit />
+        </IconButton>
+      </Box>
+
+      <Box sx={styles.manageButtons}>
+        <Button variant="contained" sx={styles.manageButton}>
+          Zarządzaj ogłoszeniami
+        </Button>
+        <Button variant="contained" sx={styles.manageButton}>
+          Zarządzaj wydarzeniami
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default GroupManagement;

vite.config.ts

@@ -9,4 +9,7 @@ export default defineConfig({
       '@': '/src',
     },
   },
+})
+
+
 });