added a start to profile Page

theme-costume-app/src/App.js

@@ -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} />

theme-costume-app/src/Profile.js

-// 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;

theme-costume-app/src/components/ResponsiveAppBar.js

@@ -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>