added products, profile page, sign up form

theme-costume-app/src/App.js

-import React from 'react';
+import React, {useState} from 'react';
 import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
 import Home from './Home';
 import About from './About';
+import Profile from './Profile'
 import ResponsiveAppBar from './components/ResponsiveAppBar';
 
 function App() {
+  const [user, setUser] = useState(null);
+
+  const handleSignup = (formData) => {
+    // Simulate user signup (for demo purposes)
+    setUser({
+      username: formData.username,
+      email: formData.email,
+      creditPoints: 0, // Set initial credit points for new user
+      avatarUrl: '', // You can provide a default avatar URL or leave it empty
+    });
+  };
+
   return (
     <Router>
       <div className="App">
         <ResponsiveAppBar />
-        <h1>Welcome to My React App</h1>
-        <nav>
-          <ul>
-            <li>
-              <Link to="/">Home</Link>
-            </li>
-            <li>
-              <Link to="/about">About</Link>
-            </li>
-          </ul>
-        </nav>
           {/* 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="/profile" element={<Profile user={user} onSignup={handleSignup}/>} />
+          <Route path="/about" Component={Home} />
+
         </Routes>  
       </div>
     </Router>

theme-costume-app/src/Home.js

 import React from 'react';
 import Carousel from './components/Carousel';
 import halloweenImg from './assets/Halloween.jpg'
-import footballImg from './assets/Halloween.jpg'
-import collegeImg from './assets/Halloween.jpg'
+import footballImg from './assets/christmas.jpg'
+import collegeImg from './assets/college.webp'
 import MyCarousel from './components/MyCarousel';
+import Product from './components/Product';
+import { Grid, ThemeProvider, Typography } from '@mui/material';
+
+import cheerleader from './assets/manlig-hejarklacksledare.jpg';
+import yellowSuit from './assets/suitmeister-gul-kostym.jpg';
+import glitterHatt from './assets/glitterhatt-guld.jpg';
+import bananaCostume from './assets/banan-maskeraddrakt.jpg'
+import grandma from './assets/grandma-maskeraddrakt.jpg'
+import cow from './assets/kossa-budget.jpg'
+import cheerleaderRed from './assets/manlig-hejarklacksledare-rod.jpg'
+import nun from './assets/manlig-nunna.jpg'
+import sjuksköterska from './assets/manlig-sjukskoterska.jpg'
+import tennisProf from './assets/tennisproffs-maskeraddrakt.jpg'
+import theme from './styles/theme.js'
 const themeCategoryImg = [
   {
     name: 'Halloween',
@@ -19,14 +33,45 @@ const themeCategoryImg = [
   }
 ]
 
+
 const Home = () => {
+  const products = [
+    { id: 1, imageUrl: cheerleader, price: 29.99 },
+    { id: 2, imageUrl: yellowSuit, price: 39.99 },
+    { id: 3, imageUrl: glitterHatt, price: 49.99 },
+    { id: 4, imageUrl: bananaCostume, price: 29.99 },
+    { id: 5, imageUrl: grandma, price: 39.99 },
+    { id: 6, imageUrl: cow, price: 49.99 },
+    { id: 7, imageUrl: cheerleaderRed, price: 49.99 },
+    { id: 8, imageUrl: nun, price: 29.99 },
+    { id: 9, imageUrl: sjuksköterska, price: 39.99 },
+    { id: 10, imageUrl: tennisProf, price: 49.99 },
+    // Add more products as needed
+  ];
+
   return (
+    <ThemeProvider theme={theme}>
+
     <div>
-      {/* <Carousel showingItems={1} items={themeCategoryImg}/> */}
-      <MyCarousel />
-      <h2>Home Page</h2>
-      <p>Welcome to the Home page!</p>
+      <Carousel showingItems={1} items={themeCategoryImg}/>
+      {/* <MyCarousel /> */}
+      <div style={{ padding: 16 }}>
+        <Typography 
+          variant='h3'
+          color='primary'
+          >
+          All products
+        </Typography>
+        <Grid container spacing={3}>
+          {products.map((product) => (
+            <Grid key={product.id} item xs={12} sm={6} md={4} lg={3}>
+              <Product imageUrl={product.imageUrl} price={product.price} />
+            </Grid>
+          ))}
+        </Grid>
+      </div>
     </div>
+    </ThemeProvider>
   );
 };
 

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';
+
+const Profile = ({ user, onSignup }) => {
+  if (!user) {
+    // User is not logged in, display signup form
+    return <SignupForm onSignup={onSignup} />;
+  }
+
+  // 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>
+  );
+};
+
+export default Profile;

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

@@ -70,7 +70,7 @@ const Carousel = ({ showingItems, items }) => {
   return (
     <div style={styles.container}>
       <div style={styles.topRow}>
-        <h3>Recently Added</h3>
+        <h3>Teman</h3>
         <div style={{ display: 'flex', alignItems: 'center' }}>
           <NavigationComponent
             goToPreviousPage={previousPage}

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

+// src/Product.js
+
+import React, {useState} from 'react';
+import { Card, CardContent, CardMedia, Typography, Dialog, DialogContent, Button } from '@mui/material';
+
+const Product = ({ imageUrl, price }) => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleAddToCart = () => {
+    // You can implement the add to cart functionality here
+    alert('Product added to cart');
+    handleClose(); // Close the dialog after adding to cart (optional)
+  };
+
+  return (
+    <>
+    <Card sx={{ maxWidth: 345, cursor: 'pointer' }} onClick={handleOpen}>
+      <CardMedia
+        component="img"
+        height="280"
+        image={imageUrl}
+        alt="Product Image"
+      />
+      <CardContent>
+        <Typography variant="h5" color='secondary' component="div">
+          Price: ${price}
+        </Typography>
+      </CardContent>
+    </Card>
+    <Dialog open={open} onClose={handleClose}>
+      <DialogContent>
+        <img src={imageUrl} alt="Product Image" style={{ maxWidth: '100%' }} />
+      </DialogContent>
+      <Button variant="contained" color="primary" onClick={handleAddToCart} style={{ marginTop: 16 }}>
+            Add to Cart
+      </Button>
+    </Dialog>
+    </>
+  );
+};
+
+export default Product;

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

@@ -13,7 +13,7 @@ import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 import AdbIcon from '@mui/icons-material/Adb';
 
-const pages = ['Products', 'Pricing', 'Blog'];
+const pages = ['Kategorier', 'Nyheter', 'Topplistan'];
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
 
 function ResponsiveAppBar() {

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

+// src/SignupForm.js
+
+import React, { useState } from 'react';
+import { TextField, Button, Typography } from '@mui/material';
+
+const SignupForm = ({ onSignup }) => {
+  const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSignup = () => {
+    // Perform signup logic (e.g., call an API to register the user)
+    // For demonstration, just log the form data
+    console.log({ email, username, password });
+    // Invoke parent callback with form data
+    onSignup({ email, username, password });
+  };
+
+  return (
+    <div>
+      <Typography variant="h4" gutterBottom>
+        Sign Up
+      </Typography>
+      <TextField
+        label="Email"
+        fullWidth
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        margin="normal"
+      />
+      <TextField
+        label="Username"
+        fullWidth
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+        margin="normal"
+      />
+      <TextField
+        label="Password"
+        fullWidth
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        margin="normal"
+      />
+      <Button variant="contained" color="primary" onClick={handleSignup}>
+        Sign Up
+      </Button>
+    </div>
+  );
+};
+
+export default SignupForm;