64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import { Modal, Button } from 'react-bootstrap'
|
||
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
|
||
|
||
import LineDot from './LineDot'
|
||
import { categoryNames } from '../assets/category'
|
||
import { useBook } from '../hooks/api'
|
||
import { Announcement } from '../hooks/api/useHomeAnnouncementList'
|
||
|
||
type AnnouncementDetailsProps = {
|
||
close: () => void,
|
||
announcement: Announcement
|
||
}
|
||
|
||
function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }: AnnouncementDetailsProps) {
|
||
const { handleBook, status: bookStatus } = useBook(id)
|
||
|
||
return (
|
||
<div
|
||
className="modal"
|
||
style={{ display: 'flex', alignItems: "center", justifyContent: "center" }}
|
||
>
|
||
<Modal.Dialog style={{ minWidth: "50vw" }}>
|
||
<Modal.Header closeButton onHide={close}>
|
||
<Modal.Title>
|
||
Подробнее
|
||
</Modal.Title>
|
||
</Modal.Header>
|
||
|
||
<Modal.Body>
|
||
<h1>{name}</h1>
|
||
|
||
<span>{categoryNames[category]}</span>
|
||
<span className='m-2'>•</span>{/* dot */}
|
||
<span>Годен до {new Date(bestBy).toLocaleString('ru-RU')}</span>
|
||
|
||
<p className='mb-3'>{description}</p>
|
||
|
||
<MapContainer style={{ width: "100%", minHeight: 300 }} center={[lat, lng]} zoom={16} >
|
||
<TileLayer
|
||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||
/>
|
||
|
||
<Marker position={[lat, lng]}>
|
||
<Popup>
|
||
{address}
|
||
<br />
|
||
<LineDot station={metro} /> {metro}
|
||
</Popup>
|
||
</Marker>
|
||
</MapContainer>
|
||
</Modal.Body>
|
||
|
||
<Modal.Footer>
|
||
<Button variant='success' onClick={() => void handleBook()}>
|
||
{bookStatus || "Забронировать"}
|
||
</Button>
|
||
</Modal.Footer>
|
||
</Modal.Dialog>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default AnnouncementDetails |