Skip to content
Snippets Groups Projects
Commit 4228cf85 authored by Maximilian Sjöström's avatar Maximilian Sjöström
Browse files

Merge branch 'profilePage' into 'main' 

Profile page

See merge request !3
parents 9335b2f7 2b8e1a5e
Branches
No related tags found
1 merge request!3Profile page
Hide whitespace changes
Inline Side-by-side
theme-costume-app/package-lock.json
+ 8
− 8
View file @ 4228cf85
......@@ -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",
......
theme-costume-app/package.json
+ 1
− 1
View file @ 4228cf85
......@@ -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",
......
theme-costume-app/src/App.js
+ 1
− 5
View file @ 4228cf85
......@@ -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} />
......
theme-costume-app/src/Profile.js
+ 50
− 29
View file @ 4228cf85
// 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;
theme-costume-app/src/ProfilePage.css 0 → 100644
+ 159
− 0
View file @ 4228cf85
.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
theme-costume-app/src/components/ResponsiveAppBar.js
+ 25
− 15
View file @ 4228cf85
......@@ -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;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment