You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
4.7 KiB
113 lines
4.7 KiB
6 months ago
|
import React from 'react'
|
||
|
|
import ReactDOMServer from 'react-dom/server'
|
||
|
|
import { Card, CardBody, CardText, Button, Label, UncontrolledTooltip, Tooltip, CardFooter } from 'reactstrap'
|
||
|
|
// import { Button as Button2 } from 'primereact/button'
|
||
|
|
// import { Skeleton } from 'primereact/skeleton'
|
||
|
|
import { Bookmark, Circle, CornerUpRight, Star } from 'react-feather'
|
||
|
|
import { Divider } from 'primereact/divider'
|
||
|
|
import Rating from 'react-rating'
|
||
|
|
// import { numberFormat } from '@utils'
|
||
|
|
// import { Shortcut } from '@mui/icons-material'
|
||
|
|
|
||
|
|
import 'primereact/resources/themes/lara-light-indigo/theme.css' // theme
|
||
|
|
import 'primereact/resources/primereact.css' // core css
|
||
|
|
// import "primeicons/primeicons.css" // icons
|
||
|
|
import 'primeflex/primeflex.css'
|
||
|
|
import noImage from './noImage.png'
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
import { store } from '../../kytp/store/store'
|
||
|
|
import { Shortcut } from '@mui/icons-material'
|
||
|
|
export default function ComponentPopUpPoiGoogle(props) {
|
||
|
|
const content = props
|
||
|
|
// const content = data.features[0].properties
|
||
|
|
// {
|
||
|
|
// "id_data": "g_5029108_090",
|
||
|
|
// "nama": "Jasa isi Games Pc/Laptop",
|
||
|
|
// "alamat": "Jl. Pengadegan Selatan No.10, RT.4/RW.5",
|
||
|
|
// "category": "Video game store",
|
||
|
|
// "nm_ar_zona": "ANNISA BALATIF",
|
||
|
|
// "nm_kantor": "KPP Pratama Jakarta Pancoran",
|
||
|
|
// "top_image_url": "https://lh5.googleusercontent.com/p/AF1QipPs4cUvbFaUeAnRx4zV-T543H4Ly3SoD3qh8NA=w426-h240-k-no",
|
||
|
|
// "adm1_en": "DKI Jakarta",
|
||
|
|
// "adm2_en": "Kota Administrasi Jakarta Selatan",
|
||
|
|
// "adm3_en": "Pancoran",
|
||
|
|
// "adm4_en": "Pengadegan",
|
||
|
|
// "rating": "4",
|
||
|
|
// "review": "4"
|
||
|
|
// }
|
||
|
|
const ElementReact = () => {
|
||
|
|
const petaStore = store.getState().peta
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div width={'200px'}>
|
||
|
|
<div style={{ width: '262px', height: '104px', overflow: 'hidden' }} className="d-flex center-block ">
|
||
|
|
<img
|
||
|
|
alt=""
|
||
|
|
src={content.top_image_url ?? noImage}
|
||
|
|
style={{ maxWidth: 'inherit', maxHeight: 'inherit', height: '100px', width: 'inherit', objectFit: 'cover' }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<CardBody className="m-0 p-0 d-flex justify-content-around align-items-center">
|
||
|
|
<div style={{ width: '190px' }}>
|
||
|
|
<h5 className="poi-name text-primary fw-bolder cursor-pointer"> {content.nama}</h5>
|
||
|
|
</div>
|
||
|
|
<div style={{ width: '64px' }} className="d-flex justify-content-around text-end">
|
||
|
|
<div className="arah">
|
||
|
|
<Button className="btn-icon rounded-circle btn-sm" id="arah" color="primary">
|
||
|
|
<CornerUpRight size={14} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
{/* <Button className="btn-icon rounded-circle btn-sm" outline color="primary">
|
||
|
|
<Bookmark size={14} />
|
||
|
|
</Button> */}
|
||
|
|
</div>
|
||
|
|
</CardBody>
|
||
|
|
|
||
|
|
<div className="flex mt-1">
|
||
|
|
<Label className="">{Number(content.rating).toLocaleString('id-ID')}</Label>
|
||
|
|
<Rating
|
||
|
|
className="px-25"
|
||
|
|
readonly
|
||
|
|
initialRating={content.rating}
|
||
|
|
direction={'ltr'}
|
||
|
|
emptySymbol={<Star size={12} fill="#babfc7" stroke="#babfc7" />}
|
||
|
|
fullSymbol={<Star size={12} fill="#ff9700" stroke="#ff9700" />}
|
||
|
|
/>
|
||
|
|
<Label className="">({Number(content.review ?? 0)} ulasan)</Label>
|
||
|
|
</div>
|
||
|
|
<div style={{ width: '100%' }}>
|
||
|
|
<div className="">Kategori : {content.category}</div>
|
||
|
|
</div>
|
||
|
|
<div className="arah2" id="arah2"></div>
|
||
|
|
<div className="container-next-data my-50" id="container-next-data">
|
||
|
|
<ul className="list-unstyled" style={{ width: '262px' }}>
|
||
|
|
<li className="mb-25 d-flex justify-content-between">
|
||
|
|
<span className="fw-bolder mr-1">Alamat:</span>
|
||
|
|
<span className="text-right">{props.alamat}</span>
|
||
|
|
</li>
|
||
|
|
<li className="mb-25 d-flex justify-content-between">
|
||
|
|
<span className="fw-bolder mr-1">Zona:</span>
|
||
|
|
<span className="text-right">
|
||
|
|
{props.nm_kantor} - {props.nm_ar_zona}
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<CardFooter className="pt-1 text-right">
|
||
|
|
<Button className="tutup-box" outline color="primary" size="sm" title="Tutup tampilan">
|
||
|
|
{/* <Shortcut style={{ transform: 'scaleX(-1)' }} /> */}
|
||
|
|
<span className="align-middle ms-25">Tutup</span>
|
||
|
|
</Button>
|
||
|
|
</CardFooter>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
return ReactDOMServer.renderToString(
|
||
|
|
<div>
|
||
|
|
<ElementReact />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|