Spaces:
Sleeping
Sleeping
File size: 6,484 Bytes
fab48db |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
import { useState } from 'react';
import { Modal, Button, Container, Row, Col, Tab, Tabs } from 'react-bootstrap';
import MenuItem from '../molecules/MenuItem';
import BasicTemplate from '../templates/BasicTemplate';
function MenuPage() {
const [key, setKey] = useState('cat1');
const [selectedDish, setSelectedDish] = useState(null);
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
function handleShow(dish) {
setSelectedDish(dish); // Set the selected dish to state
setShow(true); // Show the modal
}
const menuItems1 = [
{ name: 'Món 1 thể loại 1', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 2 thể loại 1', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 3 thể loại 1', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
];
const menuItems2 = [
{ name: 'Món 1 thể loại 2', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 2 thể loại 2', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 3 thể loại 2', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
];
const menuItems3 = [
{ name: 'Món 1 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 2 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 3 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 4 thể loại 3', description: 'Mô tả món 1', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 5 thể loại 3', description: 'Mô tả món 2', imageSrc: '/placeholder3.jpg' },
{ name: 'Món 6 thể loại 3', description: 'Mô tả món 3', imageSrc: '/placeholder3.jpg' }
];
return <BasicTemplate content={(
<Container fluid className='my-5'>
<>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{selectedDish?.name}</Modal.Title> {/* Dish name in the title */}
</Modal.Header>
<Modal.Body>
<p>{selectedDish?.description}</p> {/* Dish description */}
<img src={selectedDish?.imageSrc} alt={selectedDish?.name} style={{ width: '100%' }} /> {/* Dish image */}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</>
<h1 className='text-center mb-5'>Thực đơn</h1>
<Row>
<Col xs={1} md={2}></Col>
<Col xs={10} md={8}>
<Tabs
id="controlled-tab-example"
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3"
>
<Tab eventKey="cat1" title="Thể loại 1">
<Container fluid className='my-5'>
<Row md={3} className="g-4">
{menuItems1.map((item, idx) => (
<Col key={idx} >
<div onClick={() => handleShow(item)}>
<MenuItem
dishName={item.name}
description={item.description}
imageSrc={item.imageSrc}
/>
</div>
</Col>
))}
</Row>
</Container>
</Tab>
<Tab eventKey="cat2" title="Thể loại 2">
<Container fluid className='my-5'>
<Row md={3} className="g-4">
{menuItems2.map((item, idx) => (
<Col key={idx}>
<div onClick={() => handleShow(item)}>
<MenuItem
dishName={item.name}
description={item.description}
imageSrc={item.imageSrc}
/>
</div>
</Col>
))}
</Row>
</Container>
</Tab>
<Tab eventKey="cat3" title="Thể loại 3">
<Container fluid className='my-5'>
<Row md={3} className="g-4">
{menuItems3.map((item, idx) => (
<Col key={idx}>
<div onClick={() => handleShow(item)}>
<MenuItem
dishName={item.name}
description={item.description}
imageSrc={item.imageSrc}
/>
</div>
</Col>
))}
</Row>
</Container>
</Tab>
</Tabs>
</Col>
<Col xs={1} md={2}></Col>
</Row>
</Container>
)} />
}
export default MenuPage; |