Merge branch 'Topplistan' into 'main'

added Topplistan med sorterade bilder

See merge request !1

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>

theme-costume-app/src/Charts.js

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

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

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

 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>