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

added a start to profile Page

parent 9335b2f7
Branches
No related tags found
1 merge request!3Profile page
......@@ -23,13 +23,15 @@ function App() {
<Router>
<div className="App">
<ResponsiveAppBar />
{/* Route for Home page */}
<Routes>
<Route path="/about" Component={Home} />
</Routes>
<Routes>
<Route exact path="/" Component={Home} />
{/* Route for About page */}
<Route path="/about" Component={About} />
<Route path="/about" Component={Home} />
<Route path="/profile" element={<Profile user={user} onSignup={handleSignup}/>} />
<Route path="/about" Component={Home} />
<Route path="/Charts" Component={Charts} />
......
// 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';
const user = [
{ name: 'GÖRAN', email: 'pengarfinns@inte.nu', age: '48', profilePicture: yellowSuit }
];
const products = [
{ name: 'nunna' }
];
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>
<div style={styles.profileHeader}>
<img src={currentUser.profilePicture} alt="Profile" style={styles.profilePicture} />
<h1 style={styles.profileName}>Welcome, {currentUser.name}!</h1>
</div>
<div>
<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>
<h2>Currently Listed Products:</h2>
<ul>
{products.map((product, index) => (
<li key={index}>{product.name}</li>
))}
</ul>
</div>
</div>
);
};
export default Profile;
const styles = {
profileHeader: {
display: 'flex',
alignItems: 'center',
marginBottom: '20px',
},
profilePicture: {
width: '200px',
height: '200px',
borderRadius: '50%',
margin: '20px',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)',
},
profileName: {
fontSize: '24px',
},
};
export default ProfilePage;
......@@ -18,10 +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() {
......@@ -158,9 +162,9 @@ function ResponsiveAppBar() {
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
<MenuItem key={setting.title} onClick={handleCloseNavMenu} component={Link} to={setting.link}>
<Typography textAlign="center">{setting.title}</Typography>
</MenuItem>
))}
</Menu>
</Box>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment