From d5475774bb7341a9dba3bb2124832d95fb00bc9a Mon Sep 17 00:00:00 2001
From: Marc Taylor <marc@taylorit.com>
Date: Wed, 17 Apr 2024 11:02:31 +0200
Subject: [PATCH] created project structure
---
theme-costume-app/src/About.js | 14 ++
theme-costume-app/src/App.js | 46 +++--
theme-costume-app/src/Home.js | 31 ++++
theme-costume-app/src/assets/Halloween.jpg | Bin 0 -> 8199 bytes
theme-costume-app/src/components/Carousel.js | 126 ++++++++++++++
.../src/components/MyComponent.js | 29 ++++
.../src/components/ResponsiveAppBar.js | 162 ++++++++++++++++++
theme-costume-app/src/index.js | 6 +-
theme-costume-app/src/theme.js | 19 ++
9 files changed, 414 insertions(+), 19 deletions(-)
create mode 100644 theme-costume-app/src/About.js
create mode 100644 theme-costume-app/src/Home.js
create mode 100644 theme-costume-app/src/assets/Halloween.jpg
create mode 100644 theme-costume-app/src/components/Carousel.js
create mode 100644 theme-costume-app/src/components/MyComponent.js
create mode 100644 theme-costume-app/src/components/ResponsiveAppBar.js
create mode 100644 theme-costume-app/src/theme.js
diff --git a/theme-costume-app/src/About.js b/theme-costume-app/src/About.js
new file mode 100644
index 0000000..84f18b2
--- /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 3784575..f3a1ba1 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 0000000..b1b2a66
--- /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
GIT binary patch
literal 8199
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
YJ8aV0@=<~Dy276cFI9HRT>O6%0HTT*#sB~S
literal 0
HcmV?d00001
diff --git a/theme-costume-app/src/components/Carousel.js b/theme-costume-app/src/components/Carousel.js
new file mode 100644
index 0000000..1d04483
--- /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 0000000..613f6ca
--- /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 0000000..8c435ab
--- /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 d563c0f..3692082 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 0000000..52293f6
--- /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;
--
GitLab