Sha256: 53e9e6ff1b88e54c748c14ee3d52f59ec7b0caee865f9c19355faee371dbd8a4
Contents?: true
Size: 1.77 KB
Versions: 86
Compression:
Stored size: 1.77 KB
Contents
import React from "react"
import classnames from "classnames"
import { buildCss, buildHtmlProps } from "../utilities/props"
import { globalProps } from "../utilities/globalProps"
import Body from "../pb_body/_body"
import Icon from "../pb_icon/_icon"
const statusMap: {
neutral: "neutral"
decrease: "negative"
increase: "positive"
} = {
increase: "positive",
decrease: "negative",
neutral: "neutral",
}
const iconMap = {
increase: "arrow-up",
decrease: "arrow-down",
}
type StatChangeProps = {
change?: "increase" | "decrease" | "neutral"
className?: string
dark?: boolean
icon?: string
id?: string
htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
value?: string | number
}
const StatChange = (props: StatChangeProps): React.ReactElement => {
const {
change = "neutral",
className,
dark = false,
htmlOptions = {},
icon,
id,
value,
} = props
const status = statusMap[change as keyof typeof statusMap]
let returnedIcon = iconMap[change as keyof typeof iconMap]
if (icon) {
returnedIcon = icon
}
const htmlProps = buildHtmlProps(htmlOptions)
return (
<>
{value && (
<div
className={classnames(
buildCss("pb_stat_change_kit", status),
globalProps(props),
className
)}
id={id}
{...htmlProps}
>
<Body dark={dark}
status={status}
>
{" "}
{returnedIcon && (
<>
<Icon dark={dark}
fixed_width
icon={returnedIcon}
/>{" "}
</>
)}
{`${value}%`}
</Body>
</div>
)}
</>
)
}
export default StatChange
Version data entries
86 entries across 86 versions & 1 rubygems