diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js
index f3a1ba18775e69afb29501093292da44346d7eea..25946b5a24f97a6ee5fc1c4199c8bfeffe45771e 100644
--- a/theme-costume-app/src/App.js
+++ b/theme-costume-app/src/App.js
@@ -1,31 +1,37 @@
-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>
diff --git a/theme-costume-app/src/Home.js b/theme-costume-app/src/Home.js
index 552e76c4e6f70114363b6c2841fbff2bb661b6a8..dd7e7ef67beed4761ac11119146b899f50c45b05 100644
--- a/theme-costume-app/src/Home.js
+++ b/theme-costume-app/src/Home.js
@@ -1,9 +1,23 @@
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>
);
};
diff --git a/theme-costume-app/src/Profile.js b/theme-costume-app/src/Profile.js
new file mode 100644
index 0000000000000000000000000000000000000000..a5871c322e7b03f2c44e89dee4d162abdff40de4
--- /dev/null
+++ b/theme-costume-app/src/Profile.js
@@ -0,0 +1,36 @@
+// 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;
diff --git a/theme-costume-app/src/assets/banan-maskeraddrakt.jpg b/theme-costume-app/src/assets/banan-maskeraddrakt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f7f0a6eaf1ca747a70ae2e8d44b2ace7daa840c5
Binary files /dev/null and b/theme-costume-app/src/assets/banan-maskeraddrakt.jpg differ
diff --git a/theme-costume-app/src/assets/christmas.jpg b/theme-costume-app/src/assets/christmas.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6427f535709bee6d0becb4f03d96094bec0dab62
Binary files /dev/null and b/theme-costume-app/src/assets/christmas.jpg differ
diff --git a/theme-costume-app/src/assets/college.webp b/theme-costume-app/src/assets/college.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c04538ef5907f48752b9def496c563f4ef527b49
Binary files /dev/null and b/theme-costume-app/src/assets/college.webp differ
diff --git a/theme-costume-app/src/assets/glitterhatt-guld.jpg b/theme-costume-app/src/assets/glitterhatt-guld.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d864706e0bde71d4317f1f6c529049b46da9a9d5
Binary files /dev/null and b/theme-costume-app/src/assets/glitterhatt-guld.jpg differ
diff --git a/theme-costume-app/src/assets/grandma-maskeraddrakt.jpg b/theme-costume-app/src/assets/grandma-maskeraddrakt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0ac83d33d4e2bb35b2214a61d90729faa84ad6d7
Binary files /dev/null and b/theme-costume-app/src/assets/grandma-maskeraddrakt.jpg differ
diff --git a/theme-costume-app/src/assets/kossa-budget.jpg b/theme-costume-app/src/assets/kossa-budget.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e62fd900c56c3bd5da4223fe420eebb53e5a9bd6
Binary files /dev/null and b/theme-costume-app/src/assets/kossa-budget.jpg differ
diff --git a/theme-costume-app/src/assets/manlig-hejarklacksledare-rod.jpg b/theme-costume-app/src/assets/manlig-hejarklacksledare-rod.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ffb41c038cc2c620e761c5bef524896fa09186ac
Binary files /dev/null and b/theme-costume-app/src/assets/manlig-hejarklacksledare-rod.jpg differ
diff --git a/theme-costume-app/src/assets/manlig-hejarklacksledare.jpg b/theme-costume-app/src/assets/manlig-hejarklacksledare.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9b339d38959f510eef5c698057301feed3744573
Binary files /dev/null and b/theme-costume-app/src/assets/manlig-hejarklacksledare.jpg differ
diff --git a/theme-costume-app/src/assets/manlig-nunna.jpg b/theme-costume-app/src/assets/manlig-nunna.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7421337a5fdf02661ba5441ad066fb37062b3500
Binary files /dev/null and b/theme-costume-app/src/assets/manlig-nunna.jpg differ
diff --git a/theme-costume-app/src/assets/manlig-sjukskoterska.jpg b/theme-costume-app/src/assets/manlig-sjukskoterska.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5a04d62ca98527399862915bbe088e7d0c3df079
Binary files /dev/null and b/theme-costume-app/src/assets/manlig-sjukskoterska.jpg differ
diff --git a/theme-costume-app/src/assets/suitmeister-gul-kostym.jpg b/theme-costume-app/src/assets/suitmeister-gul-kostym.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7cd82fce8d00bc175c443d1bcb2964adb7419e8c
Binary files /dev/null and b/theme-costume-app/src/assets/suitmeister-gul-kostym.jpg differ
diff --git a/theme-costume-app/src/assets/tennisproffs-maskeraddrakt.jpg b/theme-costume-app/src/assets/tennisproffs-maskeraddrakt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..494f48bf5b5f58d05107f66bcf9d891eca64fad2
Binary files /dev/null and b/theme-costume-app/src/assets/tennisproffs-maskeraddrakt.jpg differ
diff --git a/theme-costume-app/src/components/Carousel.js b/theme-costume-app/src/components/Carousel.js
index 77ff0d15606ba462a5ef507b57a5b625acba677f..096b1052bbedc52484c60ac089bb2cec8d11605f 100644
--- a/theme-costume-app/src/components/Carousel.js
+++ b/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}
diff --git a/theme-costume-app/src/components/Product.js b/theme-costume-app/src/components/Product.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c00afb16c9b814d8fcff8f85d8de61d94b9f2e2
--- /dev/null
+++ b/theme-costume-app/src/components/Product.js
@@ -0,0 +1,50 @@
+// 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;
diff --git a/theme-costume-app/src/components/ResponsiveAppBar.js b/theme-costume-app/src/components/ResponsiveAppBar.js
index 8c435ab912edc552db351c4fb9e219b647119f16..62d788da9eed1e7e2fe1a5d79d35643381c8d29d 100644
--- a/theme-costume-app/src/components/ResponsiveAppBar.js
+++ b/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() {
diff --git a/theme-costume-app/src/components/Sidebar.js b/theme-costume-app/src/components/Sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/theme-costume-app/src/components/SignupForm.js b/theme-costume-app/src/components/SignupForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..1abbdcb58b1a270a0edb15a653c60ba6a13354d8
--- /dev/null
+++ b/theme-costume-app/src/components/SignupForm.js
@@ -0,0 +1,53 @@
+// 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;
diff --git a/theme-costume-app/src/styles/theme.js b/theme-costume-app/src/styles/theme.js
new file mode 100644
index 0000000000000000000000000000000000000000..b2ffb2814d90b2cfbf3d39d530006ff69d104535
--- /dev/null
+++ b/theme-costume-app/src/styles/theme.js
@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles';
+
+// Define your custom theme
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#2ecc71',
+ secondary: '#2ecc71',
+ },
+ secondary: {
+ main: '#3498db',
+ },
+ text: {
+ primary: "#3498db",
+ }
+ },
+});
+
+export default theme;
diff --git a/theme-costume-app/src/theme.js b/theme-costume-app/src/theme.js
index 52293f62c497d5285b5b9372000118804b877a39..605aae5629e391e2335b35f0e05ff50468708b3e 100644
--- a/theme-costume-app/src/theme.js
+++ b/theme-costume-app/src/theme.js
@@ -4,14 +4,14 @@ import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
- main: '#cf32c1',
- secondary: '#10e858',
+ main: '#2ecc71',
+ secondary: '#3498db',
},
secondary: {
- main: '#f50057',
+ main: '#3498db',
},
text: {
- primary: "#10e858",
+ primary: "#3498db",
}
},
});