Skip to content

Commit

Permalink
actualizaciones
Browse files Browse the repository at this point in the history
  • Loading branch information
Alejandro Carreño committed Aug 25, 2024
1 parent 67ba3ad commit 8487a53
Show file tree
Hide file tree
Showing 5 changed files with 190 additions and 122 deletions.
42 changes: 42 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Expand Down
165 changes: 101 additions & 64 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,98 +1,135 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';


// Definimos el Navbar
const Navbar = () => {
const handleLinkClick = (url, e) => {
e.preventDefault();
window.open(url, "_blank"); // Abre la página en una nueva pestaña
};

return (
<>
<nav className="navbar">
<img src={require('./imagenes/logo.png')} alt="Logo" className="logo" />
<ul className="nav-links">
<li>
<a href="#promociones" onClick={(e) => handleLinkClick('/promociones', e)}>
Promociones
</a>
</li>
<li>
<a href="#menu" onClick={(e) => handleLinkClick('/menu', e)}>
Menú
</a>
</li>
<li>
<a href="#combos" onClick={(e) => handleLinkClick('/combos', e)}>
Combos
</a>
</li>
</ul>
</nav>
<Carousel />
<ImageBelowCarousel />
<Footer />
</>
);
const handleLinkClick = (url, e) => {
e.preventDefault();
window.open(url, "_blank"); // Abre la página en una nueva pestaña
};

return (
<nav className="navbar">
<img src={require('./imagenes/logo.png')} alt="Logo" className="logo" />
<ul className="nav-links">
<li>
<a href="#promociones" onClick={(e) => handleLinkClick('/promociones', e)}>
Promociones
</a>
</li>
<li>
<a href="#menu" onClick={(e) => handleLinkClick('/menu', e)}>
Menú
</a>
</li>
<li>
<a href="#combos" onClick={(e) => handleLinkClick('/combos', e)}>
Combos
</a>
</li>
</ul>
</nav>
);
};

// Definimos el Carousel
const Carousel = () => {
const [currentSlide, setCurrentSlide] = useState(0);

const slides = [
require('./imagenes/cs1.png'),
require('./imagenes/c2.png'),
require('./imagenes/c3.png')
require('./imagenes/cs1.png'),
require('./imagenes/c2.png'),
require('./imagenes/c3.png')
];

const nextSlide = () => {
setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length);
setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length);
};

useEffect(() => {
const slideInterval = setInterval(() => {
nextSlide();
}, 4000);
const slideInterval = setInterval(() => {
nextSlide();
}, 4000);

return () => clearInterval(slideInterval);
return () => clearInterval(slideInterval);
}, [currentSlide]);

return (
<div className="carousel-container">
<div className="carousel" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
{slides.map((slide, index) => (
<div className="carousel-item" key={index}>
<img src={slide} alt={`Slide ${index + 1}`} />
</div>
))}
<div className="carousel-container">
<div className="carousel" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
{slides.map((slide, index) => (
<div className="carousel-item" key={index}>
<img src={slide} alt={`Slide ${index + 1}`} />
</div>
<button className="carousel-control prev" onClick={() => setCurrentSlide((currentSlide - 1 + slides.length) % slides.length)}></button>
<button className="carousel-control next" onClick={() => setCurrentSlide((currentSlide + 1) % slides.length)}></button>
))}
</div>
<button className="carousel-control prev" onClick={() => setCurrentSlide((currentSlide - 1 + slides.length) % slides.length)}></button>
<button className="carousel-control next" onClick={() => setCurrentSlide((currentSlide + 1) % slides.length)}></button>
</div>
);
};

// Imagen debajo del carrusel
const ImageBelowCarousel = () => {
const imgindx = require('./imagenes/imgindx.png');

return (
<img src={imgindx} alt="Imagen debajo del carousel" className="imagen-debajo-carousel" />
<img src={imgindx} alt="Imagen debajo del carousel" className="imagen-debajo-carousel" />
);
};

// Definimos el Footer
const Footer = () => {
return (
<footer className="footer">
<div className="container">
<p>&copy; 2024 HBB Hamburguesas Bogotá</p>
<ul className="footer-links">
<li><a href="#">Acerca de nosotros</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Política de privacidad</a></li>
</ul>
</div>
</footer>
);
return (
<footer className="footer">
<div className="container">
<p>&copy; 2024 HBB Hamburguesas Bogotá</p>
<ul className="footer-links">
<li><a href="#">Acerca de nosotros</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Política de privacidad</a></li>
</ul>
</div>
</footer>
);
};

// Componente para la página de inicio
const Home = () => {
return (
<>
<Carousel />
<ImageBelowCarousel />
</>
);
};

// Componente para la página del menú
const Menu = () => {
return (
<div>
<h1>Menú</h1>
<p>Bienvenido al menú de nuestras deliciosas hamburguesas.</p>
{/* Aquí puedes agregar el contenido específico del menú */}
</div>
);
};

// Componente principal App
const App = () => {
return (
<Router>
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/menu" element={<Menu />} />
</Routes>
<Footer />
</div>
</Router>
);
};

export default Navbar;
export default App;
35 changes: 35 additions & 0 deletions src/Navbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import './App.css';

// Definimos el componente Navbar
const Navbar = () => {
const handleLinkClick = (url, e) => {
e.preventDefault();
window.open(url, "_blank"); // Abre la página en una nueva pestaña
};

return (
<nav className="navbar">
<img src={require('./imagenes/logo.png')} alt="Logo" className="logo" />
<ul className="nav-links">
<li>
<a href="#promociones" onClick={(e) => handleLinkClick('/promociones', e)}>
Promociones
</a>
</li>
<li>
<a href="#menu" onClick={(e) => handleLinkClick('/menu', e)}>
Menú
</a>
</li>
<li>
<a href="#combos" onClick={(e) => handleLinkClick('/combos', e)}>
Combos
</a>
</li>
</ul>
</nav>
);
};

export default Navbar;
69 changes: 11 additions & 58 deletions src/menu.js
Original file line number Diff line number Diff line change
@@ -1,62 +1,15 @@
import React, { useState, useEffect } from 'react';
import React from 'react';
import './App.css';


const Navbar = () => {
const handleLinkClick = (url, e) => {
e.preventDefault();
window.open(url, "_blank"); // Abre la página en una nueva pestaña
};

return (
<>
<nav className="navbar">
<img src={require('./imagenes/logo.png')} alt="Logo" className="logo" />
<ul className="nav-links">
<li>
<a href="#promociones" onClick={(e) => handleLinkClick('/promociones', e)}>
Promociones
</a>
</li>
<li>
<a href="#menu" onClick={(e) => handleLinkClick('/menu', e)}>
Menú
</a>
</li>
<li>
<a href="#combos" onClick={(e) => handleLinkClick('/combos', e)}>
Combos
</a>
</li>
</ul>
</nav>
<Carousel />
<ImageBelowCarousel />
<Footer />
</>
);
};








const Footer = () => {
return (
<footer className="footer">
<div className="container">
<p>&copy; 2024 HBB Hamburguesas Bogotá</p>
<ul className="footer-links">
<li><a href="#">Acerca de nosotros</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Política de privacidad</a></li>
</ul>
</div>
</footer>
);
// Componente para la página del menú
const Menu = () => {
return (
<div className="menu">
<h1>Menú</h1>
<p>Bienvenido al menú de nuestras deliciosas hamburguesas.</p>
{/* Aquí puedes agregar el contenido específico del menú */}
</div>
);
};

export default Navbar;
export default Menu;

0 comments on commit 8487a53

Please sign in to comment.