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.
89 lines
2.5 KiB
89 lines
2.5 KiB
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
|
|
|