diff --git a/src/images/pages/deposit/ClusterMapIcon.tsx b/src/images/pages/deposit/ClusterMapIcon.tsx new file mode 100644 index 0000000..5176fb7 --- /dev/null +++ b/src/images/pages/deposit/ClusterMapIcon.tsx @@ -0,0 +1,49 @@ +import { memo, useMemo } from 'react' + +import '@styles/components/icons/cluster-map-icon.less' + +export type ClusterMapIconProps = { + width?: number | string + height?: number | string + count?: number + showBadge?: boolean +} + +const defaultWidth = 65 +const defaultHeight = 73 +const ratio = defaultWidth / defaultHeight + +export const ClusterMapIcon = memo(({ width, height, count, showBadge }) => { + const { w, h } = useMemo(() => { + const hasW = typeof width !== 'undefined' && width !== null + const hasH = typeof height !== 'undefined' && height !== null + const out: Record = { w: defaultWidth, h: defaultHeight } + if (hasW) out.w = width + else if (typeof height === 'number') out.w = height / ratio + if (hasH) out.h = height + else if (typeof width === 'number') out.h = width * ratio + return out + }, [width, height]) + + return ( + + + + + + + + + + + {typeof count === 'number' && ( + {count} + )} + {showBadge && ( + + )} + + ) +}) + +export default ClusterMapIcon diff --git a/src/images/pages/deposit/MapPointer.svg b/src/images/pages/deposit/MapPointer.svg new file mode 100644 index 0000000..e390deb --- /dev/null +++ b/src/images/pages/deposit/MapPointer.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/pages/deposit/WellMapIcon.svg b/src/images/pages/deposit/WellMapIcon.svg new file mode 100644 index 0000000..7e49158 --- /dev/null +++ b/src/images/pages/deposit/WellMapIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/styles/components/icons/cluster-map-icon.less b/src/styles/components/icons/cluster-map-icon.less new file mode 100644 index 0000000..d664262 --- /dev/null +++ b/src/styles/components/icons/cluster-map-icon.less @@ -0,0 +1,6 @@ +.dd-cluster-map-icon { + & .dd-cluster-map-icon-count { + font-size: 22px; + font-weight: 700; + } +}