start of lazy loading

2025-07-07 16:18:50 +00:00 · 2025-06-19 09:48:24 +02:00 · 2025-06-19 09:48:24 +02:00 · 350ec46600
commit 350ec46600
parent 465c807a60
12 changed files with 68 additions and 93 deletions
--- a/code/frontend/src/pages/Profile.tsx
+++ b/code/frontend/src/pages/Profile.tsx
@ -0,0 +1,104 @@
+import "./profile.css";
+import "../components/bio.css";
+import "./loginAndSignUpPage.css";
+import "../styles/sizes.css";
+import "../styles/colors.css";
+import "../styles/fonts.css";
+import { useState } from "react";
+import Avatar from "@mui/material/Avatar";
+import QuiltedImageList from "../components/QuiltedImageList";
+import TextField from "@mui/material/TextField";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import {
+  Box,
+  StyledEngineProvider,
+  createTheme,
+  ThemeProvider,
+  Divider,
+  Button,
+} from "@mui/material";
+import Bio from "../components/Bio";
+
+function Profile() {
+  const toggleEditMode = (event: React.MouseEvent<HTMLElement>) => {
+    isEditable(!editMode);
+  };
+  const [editMode, isEditable] = useState(true);
+
+  const theme = createTheme({
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 768,
+        md: 650,
+        lg: 768,
+        xl: 1200,
+      },
+    },
+  });
+  const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <div className="profile-display">
+          <div className="user-info">
+            <div className="user">
+              <Avatar
+                alt="Username"
+                src="./assets/images/OwlSignUp.png"
+                className="profile-avatar"
+              >
+                U
+              </Avatar>
+              <span className="profile-username body-l">Username</span>
+            </div>
+            <div>
+              <Box
+                component="form"
+                sx={{
+                  "& .MuiTextField-root": {
+                    m: 1,
+                    width: "30ch",
+                    maxWidth: "100%",
+                  },
+                }}
+                noValidate
+                autoComplete="off"
+              >
+                <TextField
+                  className="bio-input"
+                  id="outlined-multiline-flexible"
+                  label="✎ Bio"
+                  multiline
+                  maxRows={4}
+                  disabled={editMode}
+                  onClick={editMode ? toggleEditMode :  undefined}
+                />
+              </Box>
+              {!editMode && <Button variant="contained" className="button" onClick={toggleEditMode}>Ok</Button>}
+            </div>
+            <Divider variant="middle" className="divider"/>
+            <div className="numeral-data">
+              <div className="data">
+                <span aria-label="current-post-number">50</span>
+                <span className="data-label title-h1">Posts</span>
+              </div>
+              <div className="data">
+                <span aria-label="current-follower-number">100</span>
+                <span className="data-label title-h1">Followers</span>
+              </div>
+              <div className="data">
+                <span aria-label="current-following-number">50</span>
+                <span className="data-label title-h1">Following</span>
+              </div>
+            </div>
+          </div>
+          <QuiltedImageList />
+        </div>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+export default Profile;