diff --git a/theme-costume-app/package-lock.json b/theme-costume-app/package-lock.json
index 8e87805ebbfd48e5bcee934ee197d81df7f0c471..863750e870c60c21b55df235c3caaae94d831ee9 100644
--- a/theme-costume-app/package-lock.json
+++ b/theme-costume-app/package-lock.json
@@ -11,7 +11,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
- "@mui/material": "^5.15.15",
+ "@mui/material": "^5.15.18",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@@ -3480,9 +3480,9 @@
}
},
"node_modules/@mui/core-downloads-tracker": {
- "version": "5.15.15",
- "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
- "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
+ "version": "5.15.18",
+ "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.18.tgz",
+ "integrity": "sha512-/9pVk+Al8qxAjwFUADv4BRZgMpZM4m5E+2Q/20qhVPuIJWqKp4Ie4tGExac6zu93rgPTYVQGgu+1vjiT0E+cEw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
@@ -3514,13 +3514,13 @@
}
},
"node_modules/@mui/material": {
- "version": "5.15.15",
- "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
- "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
+ "version": "5.15.18",
+ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.18.tgz",
+ "integrity": "sha512-n+/dsiqux74fFfcRUJjok+ieNQ7+BEk6/OwX9cLcLvriZrZb+/7Y8+Fd2HlUUbn5N0CDurgAHm0VH1DqyJ9HAw==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@mui/base": "5.0.0-beta.40",
- "@mui/core-downloads-tracker": "^5.15.15",
+ "@mui/core-downloads-tracker": "^5.15.18",
"@mui/system": "^5.15.15",
"@mui/types": "^7.2.14",
"@mui/utils": "^5.15.14",
diff --git a/theme-costume-app/package.json b/theme-costume-app/package.json
index 9ddf58fb460e68d50f01f9018eb1910eeae3a0f3..a32b663c2d738119b7fe2c04dadb5fdd82b698c7 100644
--- a/theme-costume-app/package.json
+++ b/theme-costume-app/package.json
@@ -6,7 +6,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
- "@mui/material": "^5.15.15",
+ "@mui/material": "^5.15.18",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js
index 3d001313a9b09702b2f30cfe9ec72c5839f53ecd..20e0c8a48a837a1ac181bb4033febc2cc3a1afa9 100644
--- a/theme-costume-app/src/App.js
+++ b/theme-costume-app/src/App.js
@@ -23,13 +23,9 @@ function App() {
<Router>
<div className="App">
<ResponsiveAppBar />
- {/* Route for Home page */}
<Routes>
<Route exact path="/" Component={Home} />
-
- {/* Route for About page */}
- <Route path="/about" Component={About} />
- <Route path="/about" Component={Home} />
+ <Route path="/about" Component={About} />
<Route path="/profile" element={<Profile user={user} onSignup={handleSignup}/>} />
<Route path="/about" Component={Home} />
<Route path="/Charts" Component={Charts} />
diff --git a/theme-costume-app/src/Profile.js b/theme-costume-app/src/Profile.js
index a5871c322e7b03f2c44e89dee4d162abdff40de4..b20ea851b1fc9bdc1094c35cef3be4e983d0b390 100644
--- a/theme-costume-app/src/Profile.js
+++ b/theme-costume-app/src/Profile.js
@@ -1,36 +1,57 @@
-// src/Profile.js
-
import React from 'react';
-import { Avatar, Card, CardContent, Typography } from '@mui/material';
-import SignupForm from './components/SignupForm';
+import yellowSuit from './assets/suitmeister-gul-kostym.jpg';
+import nun from './assets/manlig-nunna.jpg';
+import sjuksköterska from './assets/manlig-sjukskoterska.jpg';
+import './ProfilePage.css'; // Import the CSS file
+
+const user = [
+ { name: 'GÖRAN', email: 'pengarfinns@inte.nu', age: '48', profilePicture: yellowSuit }
+];
+
+const products = [
+ { name: 'Nunna', picture: nun, price: '29.99' },
+ { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
+ { name: 'Nunna', picture: nun, price: '29.99' },
+ { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
+ { name: 'Nunna', picture: nun, price: '29.99' },
+ { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
+];
-const Profile = ({ user, onSignup }) => {
- if (!user) {
- // User is not logged in, display signup form
- return <SignupForm onSignup={onSignup} />;
- }
+const ProfilePage = () => {
+ // Accessing the first element of the user array
+ const currentUser = user[0];
- // User is logged in, display profile information
return (
- <Card sx={{ maxWidth: 400, margin: 'auto', marginTop: 50 }}>
- <CardContent>
- <Avatar
- sx={{ width: 100, height: 100, margin: 'auto', marginBottom: 20 }}
- alt="User Avatar"
- src={user.avatarUrl || 'https://via.placeholder.com/100'}
- />
- <Typography variant="h5" align="center" gutterBottom>
- {user.username}
- </Typography>
- <Typography variant="body1" align="center" color="textsecondary" gutterBottom>
- Email: {user.email}
- </Typography>
- <Typography variant="body2" align="center" color="textSecondary">
- Credit Points: {user.creditPoints}
- </Typography>
- </CardContent>
- </Card>
+ <div className="container">
+ <div className="header">
+ <h1 className="headerText">Welcome, {currentUser.name}!</h1>
+ </div>
+ <div className="profile">
+ <img src={currentUser.profilePicture} alt="Profile" className="profilePicture" />
+ <div className="profileInfo">
+ <h2>User Information:</h2>
+ <p>Name: {currentUser.name}</p>
+ <p>Email: {currentUser.email}</p>
+ <p>Age: {currentUser.age}</p>
+ {/* Add more user information fields as needed */}
+ </div>
+ </div>
+ <div>
+ <h2>Currently Listed Products:</h2>
+ <ul className="productList">
+ {products.map((product, index) => (
+ <li key={index} className="productItem" style={{ animationDelay: `${index * 0.4}s` }}>
+ <img src={product.picture} alt={product.name} className="productImage"/>
+ <div className="productInfo">
+ <h3 className="productName">{product.name}</h3>
+ <p className="productPrice">Price: ${product.price}</p>
+ </div>
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
);
};
-export default Profile;
+export default ProfilePage;
diff --git a/theme-costume-app/src/ProfilePage.css b/theme-costume-app/src/ProfilePage.css
new file mode 100644
index 0000000000000000000000000000000000000000..aebfcf03263523891ed46324349f6eb9be54829b
--- /dev/null
+++ b/theme-costume-app/src/ProfilePage.css
@@ -0,0 +1,159 @@
+.container {
+ font-family: Arial, sans-serif;
+ background: #f4f4f4;
+ min-height: 100vh;
+ padding: 20px;
+ }
+
+ .header {
+ background: #333;
+ color: #fff;
+ padding: 20px;
+ margin-bottom: 20px;
+ }
+
+ .headerText {
+ margin: 0;
+ font-size: 24px;
+ }
+
+ .profile {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+
+ .profilePicture {
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ margin: 20px;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+ }
+
+ .profileInfo {
+ max-width: 500px;
+ }
+
+ .productList {
+ list-style-type: none;
+ padding: 0;
+ margin: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ animation: swing-in-top-fwd 1.1s both;
+ }
+
+ .productItem {
+ width: 250px;
+ height: auto;
+ margin: 20px;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+ border-radius: 5px;
+ overflow: hidden;
+ }
+
+ .productItem:hover {
+ animation: shadow-drop-2-center 0.3s both !important;
+ }
+
+ .productImage {
+ width: 100%;
+ height: auto;
+ display: block;
+ border-radius: 5px 5px 0 0;
+ }
+
+ .productInfo {
+ padding: 10px;
+ }
+
+ .productName {
+ margin: 0;
+ font-size: 18px;
+ }
+
+ .productPrice {
+ margin: 5px 0;
+ font-size: 16px;
+ }
+
+ .swing-in-top-fwd {
+ -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+ animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+}
+
+@-webkit-keyframes swing-in-top-fwd {
+ 0% {
+ -webkit-transform: rotateX(-100deg);
+ transform: rotateX(-100deg);
+ -webkit-transform-origin: top;
+ transform-origin: top;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: rotateX(0deg);
+ transform: rotateX(0deg);
+ -webkit-transform-origin: top;
+ transform-origin: top;
+ opacity: 1;
+ }
+ }
+ @keyframes swing-in-top-fwd {
+ 0% {
+ -webkit-transform: rotateX(-100deg);
+ transform: rotateX(-100deg);
+ -webkit-transform-origin: top;
+ transform-origin: top;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: rotateX(0deg);
+ transform: rotateX(0deg);
+ -webkit-transform-origin: top;
+ transform-origin: top;
+ opacity: 1;
+ }
+ }
+
+
+ .shadow-drop-2-center {
+ -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+ animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation shadow-drop-2-center
+ * ----------------------------------------
+ */
+ @-webkit-keyframes shadow-drop-2-center {
+ 0% {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+ }
+ 100% {
+ -webkit-transform: translateZ(50px);
+ transform: translateZ(50px);
+ -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+ }
+ }
+ @keyframes shadow-drop-2-center {
+ 0% {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+ }
+ 100% {
+ -webkit-transform: translateZ(50px);
+ transform: translateZ(50px);
+ -webkit-box-shadow: 0 0 20px 0px rgba(255, 0, 0, 0.35);
+ box-shadow: 0 0 20px 0px rgba(255, 0, 0, 0.35);
+ }
+ }
+
\ No newline at end of file
diff --git a/theme-costume-app/src/components/ResponsiveAppBar.js b/theme-costume-app/src/components/ResponsiveAppBar.js
index 71aef0a986884d3cf1817b667847d9e68c0cb4cb..ce425785d74317eff07816fbdc5df142af6fac02 100644
--- a/theme-costume-app/src/components/ResponsiveAppBar.js
+++ b/theme-costume-app/src/components/ResponsiveAppBar.js
@@ -18,11 +18,14 @@ import AdbIcon from '@mui/icons-material/Adb';
const pages = [
{ title: 'Kategorier', link: '/categories' },
{ title: 'Nyheter', link: '/news' },
- { title: 'Topplistan', link: '/Topplistan' }
+ { title: 'Topplistan', link: '/Topplistan' },
];
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
-
+const settings = [
+ {title: 'Profile', link: '/profile'},
+ {title: 'Dashboard', link: '/dashboard'},
+ {title: 'Logout', link: '/logout'},
+];
function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = React.useState(null);
@@ -31,6 +34,7 @@ function ResponsiveAppBar() {
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
+
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};
@@ -52,7 +56,7 @@ function ResponsiveAppBar() {
variant="h6"
noWrap
component="a"
- href="#app-bar-with-responsive-menu"
+ href="/"
sx={{
mr: 2,
display: { xs: 'none', md: 'flex' },
@@ -95,7 +99,7 @@ function ResponsiveAppBar() {
display: { xs: 'block', md: 'none' },
}}
>
- {pages.map((page) => (
+ {pages.map((page) => (
<MenuItem key={page.title} onClick={handleCloseNavMenu} component={Link} to={page.link}>
<Typography textAlign="center">{page.title}</Typography>
</MenuItem>
@@ -124,14 +128,14 @@ function ResponsiveAppBar() {
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
- key={page.title}
- component={Link}
- to={page.link}
- onClick={handleCloseNavMenu}
- sx={{ my: 2, color: 'white', display: 'block' }}
- >
- {page.title}
- </Button>
+ key={page.title}
+ component={Link}
+ to={page.link}
+ onClick={handleCloseNavMenu}
+ sx={{ my: 2, color: 'white', display: 'block' }}
+ >
+ {page.title}
+ </Button>
))}
</Box>
@@ -158,8 +162,13 @@ function ResponsiveAppBar() {
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
- <MenuItem key={setting} onClick={handleCloseUserMenu}>
- <Typography textAlign="center">{setting}</Typography>
+ <MenuItem
+ key={setting.title}
+ onClick={handleCloseUserMenu}
+ component={Link}
+ to={setting.link}
+ >
+ <Typography textAlign="center">{setting.title}</Typography>
</MenuItem>
))}
</Menu>
@@ -169,4 +178,5 @@ function ResponsiveAppBar() {
</AppBar>
);
}
+
export default ResponsiveAppBar;