diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js
index 25946b5a24f97a6ee5fc1c4199c8bfeffe45771e..3d001313a9b09702b2f30cfe9ec72c5839f53ecd 100644
--- a/theme-costume-app/src/App.js
+++ b/theme-costume-app/src/App.js
@@ -2,7 +2,8 @@ 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 Profile from './Profile';
+import Charts from './Charts';
import ResponsiveAppBar from './components/ResponsiveAppBar';
function App() {
@@ -31,6 +32,10 @@ function App() {
<Route path="/about" Component={Home} />
<Route path="/profile" element={<Profile user={user} onSignup={handleSignup}/>} />
<Route path="/about" Component={Home} />
+ <Route path="/Charts" Component={Charts} />
+ <Route path="/" element={<Home />} />
+ <Route path="/news" element={<About />} />
+ <Route path="/Topplistan" element={<Charts />} />
</Routes>
</div>
diff --git a/theme-costume-app/src/Charts.js b/theme-costume-app/src/Charts.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c0b8349a9206f3009b07c49fb3b6a5c759716d0
--- /dev/null
+++ b/theme-costume-app/src/Charts.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import Carousel from './components/Carousel';
+import halloweenImg from './assets/Halloween.jpg'
+import christmasImg 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',
+ source: halloweenImg,
+ },
+ {
+ name: 'Christmas',
+ source: christmasImg,
+ },
+ {
+ name: 'College',
+ source: collegeImg,
+ }
+]
+
+
+const Home = () => {
+ const products = [
+ { id: 1, imageUrl: cheerleader, price: 29.99, categories: ['College'], purchases: 40},
+ { id: 2, imageUrl: yellowSuit, price: 39.99, categories: ['Christmas'], purchases: 50 },
+ { id: 3, imageUrl: glitterHatt, price: 49.99, categories: ['Christmas'], purchases: 10 },
+ { id: 4, imageUrl: bananaCostume, price: 29.99, categories: ['College'], purchases: 20 },
+ { id: 5, imageUrl: grandma, price: 39.99, categories: ['Family'], purchases: 30 },
+ { id: 6, imageUrl: cow, price: 49.99, categories: ['Farm'], purchases: 60 },
+ { id: 7, imageUrl: cheerleaderRed, price: 49.99, categories: ['College'], purchases: 70 },
+ { id: 8, imageUrl: nun, price: 29.99, categories: ['Halloween'], purchases: 80 },
+ { id: 9, imageUrl: sjuksköterska, price: 39.99, categories: ['Halloween'], purchases: 90 },
+ { id: 10, imageUrl: tennisProf, price: 49.99, categories: ['Halloween'], purchases: 100 },
+ // Add more products as needed
+ ];
+
+ const sortedProducts = products.slice().sort((a, b) => b.purchases - a.purchases);
+
+
+ return (
+ <ThemeProvider theme={theme}>
+
+ <div>
+ <Carousel showingItems={1} items={themeCategoryImg}/>
+ {/* <MyCarousel /> */}
+ <div style={{ padding: 16 }}>
+ <Typography
+ variant='h3'
+ color='primary'
+ >
+ All products
+ </Typography>
+ <Grid container spacing={3}>
+ {sortedProducts.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>
+ );
+};
+
+export default Home;
diff --git a/theme-costume-app/src/Home.js b/theme-costume-app/src/Home.js
index dd7e7ef67beed4761ac11119146b899f50c45b05..90d2a4cfbae93750eb62539288f4020791d431ed 100644
--- a/theme-costume-app/src/Home.js
+++ b/theme-costume-app/src/Home.js
@@ -7,6 +7,7 @@ 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';
diff --git a/theme-costume-app/src/components/ResponsiveAppBar.js b/theme-costume-app/src/components/ResponsiveAppBar.js
index 62d788da9eed1e7e2fe1a5d79d35643381c8d29d..71aef0a986884d3cf1817b667847d9e68c0cb4cb 100644
--- a/theme-costume-app/src/components/ResponsiveAppBar.js
+++ b/theme-costume-app/src/components/ResponsiveAppBar.js
@@ -1,4 +1,5 @@
import * as React from 'react';
+import { Link } from 'react-router-dom';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
@@ -13,9 +14,16 @@ import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import AdbIcon from '@mui/icons-material/Adb';
-const pages = ['Kategorier', 'Nyheter', 'Topplistan'];
+//const pages = ['Kategorier', 'Nyheter', 'Topplistan'];
+const pages = [
+ { title: 'Kategorier', link: '/categories' },
+ { title: 'Nyheter', link: '/news' },
+ { title: 'Topplistan', link: '/Topplistan' }
+];
+
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+
function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const [anchorElUser, setAnchorElUser] = React.useState(null);
@@ -87,9 +95,9 @@ function ResponsiveAppBar() {
display: { xs: 'block', md: 'none' },
}}
>
- {pages.map((page) => (
- <MenuItem key={page} onClick={handleCloseNavMenu}>
- <Typography textAlign="center">{page}</Typography>
+ {pages.map((page) => (
+ <MenuItem key={page.title} onClick={handleCloseNavMenu} component={Link} to={page.link}>
+ <Typography textAlign="center">{page.title}</Typography>
</MenuItem>
))}
</Menu>
@@ -116,12 +124,14 @@ function ResponsiveAppBar() {
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
- key={page}
- onClick={handleCloseNavMenu}
- sx={{ my: 2, color: 'white', display: 'block' }}
- >
- {page}
- </Button>
+ key={page.title}
+ component={Link}
+ to={page.link}
+ onClick={handleCloseNavMenu}
+ sx={{ my: 2, color: 'white', display: 'block' }}
+ >
+ {page.title}
+ </Button>
))}
</Box>