tosanoob's picture
Feature: add authentication, feeds and menu page
fab48db
raw
history blame
1.98 kB
import { useState } from 'react';
import { Container, Carousel, Row, Col } from 'react-bootstrap';
import MenuItem from '../molecules/MenuItem';
function MenuSection() {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex) => {
setIndex(selectedIndex);
};
const menuItems = [
{ name: 'Món 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
];
const countCarouselSlides = 4;
return (
<Container id="menu" className="text-center justify-content-center align-items-center my-5">
<h1 className='mb-5'>Menu</h1>
<Carousel as='a' href='/menu' activeIndex={index} onSelect={handleSelect} data-bs-theme="dark">
{Array.from({ length: countCarouselSlides }).map((_, slideIndex) => (
<Carousel.Item key={slideIndex}>
<div className="d-flex justify-content-center align-items-center" style={{ width: '100%' }}>
<img
className="img-fluid"
src="/placeholder4.jpg"
alt="a placeholder"
style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
/>
</div>
<Carousel.Caption>
<div >
<Row md={3} className="g-4">
{menuItems.map((item, idx) => (
<Col key={idx}>
<MenuItem
dishName={item.name}
description={item.description}
imageSrc={item.imageSrc}
/>
</Col>
))}
</Row>
</div>
</Carousel.Caption>
</Carousel.Item>
))}
</Carousel>
</Container>
);
}
export default MenuSection;