75 lines
2.6 KiB
TypeScript
75 lines
2.6 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 '../api/announcement/types'
|
||
import { iconItem } from '../utils/markerIcons'
|
||
import { CSSProperties } from 'react'
|
||
|
||
type AnnouncementDetailsProps = {
|
||
close: () => void,
|
||
announcement: Announcement
|
||
}
|
||
|
||
const styles = {
|
||
container: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
} as CSSProperties,
|
||
}
|
||
|
||
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={styles.container}
|
||
>
|
||
<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 icon={iconItem} 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
|