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.
90 lines
2.5 KiB
90 lines
2.5 KiB
5 months ago
|
import React from 'react'
|
||
|
|
import { Card, CardBody, Col, Row } from 'reactstrap'
|
||
|
|
import { styled } from '@mui/material/styles'
|
||
|
|
import Chip from '@mui/material/Chip'
|
||
|
|
import Paper from '@mui/material/Paper'
|
||
|
|
import TagFacesIcon from '@mui/icons-material/TagFaces'
|
||
|
|
import { Circle, Info } from '@mui/icons-material'
|
||
|
|
|
||
|
|
const ListItem = styled('li')(({ theme }) => ({
|
||
|
|
margin: theme.spacing(0.5)
|
||
|
|
}))
|
||
|
|
|
||
|
|
const Legenda = () => {
|
||
|
|
const [chipData, setChipData] = React.useState([
|
||
|
|
{ key: 0, label: 'BerNPWP', icon: <Circle color="success" /> },
|
||
|
|
{ key: 1, label: 'Non NPWP', icon: <Circle color="warning" /> },
|
||
|
|
{ key: 2, label: 'Poi Google', icon: <Circle color="error" /> }
|
||
|
|
])
|
||
|
|
|
||
|
|
const handleDelete = (chipToDelete) => () => {
|
||
|
|
setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key))
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Paper
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
flexWrap: 'wrap',
|
||
|
|
listStyle: 'none',
|
||
|
|
p: 0.5,
|
||
|
|
m: 0.5,
|
||
|
|
mb: 0.5,
|
||
|
|
opacity: '90%',
|
||
|
|
width: '150px',
|
||
|
|
backgroundColor: 'var(--danger)'
|
||
|
|
}}
|
||
|
|
component="a"
|
||
|
|
onClick={() => {
|
||
|
|
window.open(
|
||
|
|
'https://cendol-djp.intranet.pajak.go.id/geoserver/',
|
||
|
|
'_blank' // <- This is what makes it open in a new window.
|
||
|
|
)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="flex justify-content-center align-self-center ">
|
||
|
|
<div className="px-50 justify-content-center align-self-center text-white">
|
||
|
|
<Info className="" />
|
||
|
|
</div>
|
||
|
|
<div className="px-50 justify-content-center align-self-center text-white">Klik di sini jika data poi tidak tampil</div>
|
||
|
|
</div>
|
||
|
|
</Paper>
|
||
|
|
<Paper
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
flexWrap: 'wrap',
|
||
|
|
listStyle: 'none',
|
||
|
|
p: 0.5,
|
||
|
|
m: 0.5,
|
||
|
|
mb: 0.5,
|
||
|
|
opacity: '75%'
|
||
|
|
}}
|
||
|
|
component="ul"
|
||
|
|
>
|
||
|
|
<div className="px-50 justify-content-center align-self-center">Legenda Poi Dasar : </div>
|
||
|
|
|
||
|
|
{chipData.map((data) => {
|
||
|
|
let icon
|
||
|
|
|
||
|
|
if (data.label === 'React') {
|
||
|
|
icon = <TagFacesIcon color="error" />
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<ListItem key={data.key}>
|
||
|
|
<Chip icon={data.icon} label={data.label} onDelete={undefined} size="small" />
|
||
|
|
</ListItem>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</Paper>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Legenda
|