diff --git a/theme-costume-app/src/About.js b/theme-costume-app/src/About.js
new file mode 100644
index 0000000000000000000000000000000000000000..84f18b2ea1555f4e34238e6fe14510a0f397c6ed
--- /dev/null
+++ b/theme-costume-app/src/About.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import MyComponent from './components/MyComponent';
+
+const About = () => {
+ return (
+ <div>
+ <h2>About Page</h2>
+ <p>Learn more about our company.</p>
+ <MyComponent />
+ </div>
+ );
+};
+
+export default About;
diff --git a/theme-costume-app/src/App.js b/theme-costume-app/src/App.js
index 37845757234ccb68531c10cf7a2ffc589c47e342..f3a1ba18775e69afb29501093292da44346d7eea 100644
--- a/theme-costume-app/src/App.js
+++ b/theme-costume-app/src/App.js
@@ -1,24 +1,34 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import Home from './Home';
+import About from './About';
+import ResponsiveAppBar from './components/ResponsiveAppBar';
function App() {
return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
+ <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} />
+ </Routes>
+ </div>
+ </Router>
);
}
diff --git a/theme-costume-app/src/Home.js b/theme-costume-app/src/Home.js
new file mode 100644
index 0000000000000000000000000000000000000000..b1b2a66e06734a133264aea36747f4e49bef19a3
--- /dev/null
+++ b/theme-costume-app/src/Home.js
@@ -0,0 +1,31 @@
+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'
+const themeCategoryImg = [
+ {
+ name: 'Halloween',
+ source: halloweenImg,
+ },
+ {
+ name: 'Football',
+ source: footballImg,
+ },
+ {
+ name: 'College',
+ source: collegeImg,
+ }
+]
+
+const Home = () => {
+ return (
+ <div>
+ <Carousel showingItems={1} items={themeCategoryImg}/>
+ <h2>Home Page</h2>
+ <p>Welcome to the Home page!</p>
+ </div>
+ );
+};
+
+export default Home;
diff --git a/theme-costume-app/src/assets/Halloween.jpg b/theme-costume-app/src/assets/Halloween.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b25c2da47a23954aa754cb83520296f9f68d52b7
Binary files /dev/null and b/theme-costume-app/src/assets/Halloween.jpg differ
diff --git a/theme-costume-app/src/components/Carousel.js b/theme-costume-app/src/components/Carousel.js
new file mode 100644
index 0000000000000000000000000000000000000000..1d04483ee50b7125912f381debf18190bebc21bc
--- /dev/null
+++ b/theme-costume-app/src/components/Carousel.js
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+
+const NavigationComponent = ({ goToNextPage, goToPreviousPage, currentPage, totalPages }) => {
+ const renderDots = () => {
+ const dots = [];
+ for (let i = 1; i <= totalPages; i++) {
+ dots.push(
+ <span
+ key={i}
+ style={{
+ fontSize: 20,
+ margin: '0 2px',
+ color: i === currentPage ? 'black' : 'gray',
+ }}
+ >
+ ●
+ </span>
+ );
+ }
+ return dots;
+ };
+
+ return (
+ <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ <div style={{ display: 'flex', alignItems: 'center', marginRight: 10 }}>{renderDots()}</div>
+ <button onClick={goToPreviousPage}><</button>
+ <button onClick={goToNextPage}>></button>
+ </div>
+ );
+};
+
+const MoviesDisplay = ({ setOfMovies }) => {
+ return (
+ <div style={styles.movies}>
+ {setOfMovies.map((movie, index) => (
+ <div key={index} style={styles.movie}>
+ <img src={movie.source} alt={movie.name} style={styles.image} />
+ <p style={styles.movieText}>{movie.name}</p>
+ </div>
+ ))}
+ </div>
+ );
+};
+
+const Carousel = ({ showingItems, items }) => {
+ const [currentPage, setCurrentPage] = useState(1);
+ const TOTAL_PAGES = Math.ceil(items.length / showingItems);
+
+ const previousPage = () => {
+ if (currentPage === 1) {
+ setCurrentPage(TOTAL_PAGES);
+ } else {
+ setCurrentPage(currentPage - 1);
+ }
+ };
+
+ const nextPage = () => {
+ if (currentPage === TOTAL_PAGES) {
+ setCurrentPage(1);
+ } else {
+ setCurrentPage(currentPage + 1);
+ }
+ };
+
+ const groupingMovies = [];
+ for (let i = 0; i < items.length; i += showingItems) {
+ groupingMovies.push(items.slice(i, i + showingItems));
+ }
+
+ return (
+ <div style={styles.container}>
+ <div style={styles.topRow}>
+ <h3>Recently Added</h3>
+ <div style={{ display: 'flex', alignItems: 'center' }}>
+ <NavigationComponent
+ goToPreviousPage={previousPage}
+ goToNextPage={nextPage}
+ totalPages={TOTAL_PAGES}
+ currentPage={currentPage}
+ />
+ </div>
+ </div>
+ <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]} />
+ </div>
+ );
+};
+
+const styles = {
+ container: {
+ backgroundColor: '#fff',
+ width: '95%',
+ },
+ topRow: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ padding: 8,
+ width: '100%',
+ backgroundColor: 'white',
+ alignItems: 'center',
+ },
+ movies: {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ width: '100%',
+ },
+ image: {
+ margin: '0 5px',
+ width: '100vw',
+ height: 150,
+ borderRadius: 10,
+ },
+ movie: {
+ flex: '1 0 30%', // Adjust the width based on the number of items per row
+ margin: 10,
+ textAlign: 'center',
+ },
+ movieText: {
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ },
+};
+
+export default Carousel;
diff --git a/theme-costume-app/src/components/MyComponent.js b/theme-costume-app/src/components/MyComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..613f6cad4c64d22ee73aea07333198aad3fddadf
--- /dev/null
+++ b/theme-costume-app/src/components/MyComponent.js
@@ -0,0 +1,29 @@
+// MyComponent.js
+import React from 'react';
+import { Button, ThemeProvider } from '@mui/material';
+import theme from '../theme';
+
+const MyComponent = () => {
+ return (
+ <ThemeProvider theme={theme}>
+ <div>
+ <Button
+ variant="contained"
+ color="primary"
+ sx={{
+ color: (theme) => theme.palette.text.primary,
+ backgroundColor: (theme) => theme.palette.primary.main,
+ fontSize: (theme) => `${theme.typography.fontSize}px`,
+ padding: '10px 20px',
+ borderRadius: '4px',
+ cursor: 'pointer',
+ }}
+ >
+ Submit
+ </Button>
+ </div>
+ </ThemeProvider>
+ );
+};
+
+export default MyComponent;
diff --git a/theme-costume-app/src/components/ResponsiveAppBar.js b/theme-costume-app/src/components/ResponsiveAppBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..8c435ab912edc552db351c4fb9e219b647119f16
--- /dev/null
+++ b/theme-costume-app/src/components/ResponsiveAppBar.js
@@ -0,0 +1,162 @@
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+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 settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+
+function ResponsiveAppBar() {
+ const [anchorElNav, setAnchorElNav] = React.useState(null);
+ const [anchorElUser, setAnchorElUser] = React.useState(null);
+
+ const handleOpenNavMenu = (event) => {
+ setAnchorElNav(event.currentTarget);
+ };
+ const handleOpenUserMenu = (event) => {
+ setAnchorElUser(event.currentTarget);
+ };
+
+ const handleCloseNavMenu = () => {
+ setAnchorElNav(null);
+ };
+
+ const handleCloseUserMenu = () => {
+ setAnchorElUser(null);
+ };
+
+ return (
+ <AppBar position="static">
+ <Container maxWidth="xl">
+ <Toolbar disableGutters>
+ <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+ <Typography
+ variant="h6"
+ noWrap
+ component="a"
+ href="#app-bar-with-responsive-menu"
+ sx={{
+ mr: 2,
+ display: { xs: 'none', md: 'flex' },
+ fontFamily: 'monospace',
+ fontWeight: 700,
+ letterSpacing: '.3rem',
+ color: 'inherit',
+ textDecoration: 'none',
+ }}
+ >
+ LOGO
+ </Typography>
+
+ <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+ <IconButton
+ size="large"
+ aria-label="account of current user"
+ aria-controls="menu-appbar"
+ aria-haspopup="true"
+ onClick={handleOpenNavMenu}
+ color="inherit"
+ >
+ <MenuIcon />
+ </IconButton>
+ <Menu
+ id="menu-appbar"
+ anchorEl={anchorElNav}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left',
+ }}
+ keepMounted
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'left',
+ }}
+ open={Boolean(anchorElNav)}
+ onClose={handleCloseNavMenu}
+ sx={{
+ display: { xs: 'block', md: 'none' },
+ }}
+ >
+ {pages.map((page) => (
+ <MenuItem key={page} onClick={handleCloseNavMenu}>
+ <Typography textAlign="center">{page}</Typography>
+ </MenuItem>
+ ))}
+ </Menu>
+ </Box>
+ <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
+ <Typography
+ variant="h5"
+ noWrap
+ component="a"
+ href="#app-bar-with-responsive-menu"
+ sx={{
+ mr: 2,
+ display: { xs: 'flex', md: 'none' },
+ flexGrow: 1,
+ fontFamily: 'monospace',
+ fontWeight: 700,
+ letterSpacing: '.3rem',
+ color: 'inherit',
+ textDecoration: 'none',
+ }}
+ >
+ LOGO
+ </Typography>
+ <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>
+ ))}
+ </Box>
+
+ <Box sx={{ flexGrow: 0 }}>
+ <Tooltip title="Open settings">
+ <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+ <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+ </IconButton>
+ </Tooltip>
+ <Menu
+ sx={{ mt: '45px' }}
+ id="menu-appbar"
+ anchorEl={anchorElUser}
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ keepMounted
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ open={Boolean(anchorElUser)}
+ onClose={handleCloseUserMenu}
+ >
+ {settings.map((setting) => (
+ <MenuItem key={setting} onClick={handleCloseUserMenu}>
+ <Typography textAlign="center">{setting}</Typography>
+ </MenuItem>
+ ))}
+ </Menu>
+ </Box>
+ </Toolbar>
+ </Container>
+ </AppBar>
+ );
+}
+export default ResponsiveAppBar;
diff --git a/theme-costume-app/src/index.js b/theme-costume-app/src/index.js
index d563c0fb10ba0e42724b21286eb546ee4e5734fc..3692082aa69dd4731d3551abe8b00fd586a75288 100644
--- a/theme-costume-app/src/index.js
+++ b/theme-costume-app/src/index.js
@@ -3,11 +3,15 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './theme';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
- <App />
+ <ThemeProvider theme={theme}>
+ <App />
+ </ThemeProvider>
</React.StrictMode>
);
diff --git a/theme-costume-app/src/theme.js b/theme-costume-app/src/theme.js
new file mode 100644
index 0000000000000000000000000000000000000000..52293f62c497d5285b5b9372000118804b877a39
--- /dev/null
+++ b/theme-costume-app/src/theme.js
@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles';
+
+// Define your custom theme
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#cf32c1',
+ secondary: '#10e858',
+ },
+ secondary: {
+ main: '#f50057',
+ },
+ text: {
+ primary: "#10e858",
+ }
+ },
+});
+
+export default theme;