import { Localized } from "@fluent/react/compat" ; import cn from "classnames" ; import React , { FunctionComponent } from "react" ; import { reduceSeconds } from "coral-common/helpers/i18n" ; import TIME from "coral-common/time" ; import { Flex , HorizontalGutter , Tooltip , TooltipButton , } from "coral-ui/components/v2" ; import styles from "./RecentHistory.css" ; interface Props { triggered : boolean ; timeFrame : number ; rejectionRate : number ; submitted : number ; } const RecentHistory = ( { triggered , timeFrame , rejectionRate , submitted , } ) => { const { scaled , unit } = reduceSeconds ( timeFrame , [ TIME . DAY ] ) ; return ( < HorizontalGutter spacing = { 2 } > < div > < Localized id = "moderate-user-drawer-recent-history-title" > < h3 className = { styles . title } > Recent comment history < /h3> < /Localized> < Localized id = "moderate-user-drawer-recent-history-calculated" $unit = { unit } $value = { scaled } > < p className = { styles . subTitle } > Calculated over the last { scaled } { unit } < /p> < /Localized> < /div> < Flex spacing = { 3 } > < div > < p className = { cn ( styles . amount , { [ styles . triggered ] : triggered , } ) } > { Math . round ( rejectionRate * 100 ) } % < /p> < Flex > < Localized id = "moderate-user-drawer-recent-history-rejected" > < span className = { cn ( styles . amountLabel , { [ styles . triggered ] : triggered , } ) } > Rejected < /span> < /Localized> < Tooltip id = "recentCommentHistory-rejectionPopover" title = { < Localized id = "moderate-user-drawer-recent-history-tooltip-title" > < span > How is this calculated ? < /span> < /Localized>} body={<Localized id="moderate-user-drawer-recent-history-tooltip-body"> < span > Rejected comments divided by the sum of rejected and published comments , during the recent comment history time frame . < /span> < /Localized>} button={({ toggleVisibility, ref }) => (<Localized id="moderate-user-drawer-recent-history-tooltip-button" attrs={{ "aria-label": true }}> < TooltipButton className = { styles . tooltip } aria - label = "Toggle recent comment history tooltip" toggleVisibility = { toggleVisibility } ref = { ref } / > < /Localized>)}/ > < /Flex> < /div> < div > < p className = { styles . amount } > { submitted } < /p> < Localized id = "moderate-user-drawer-recent-history-tooltip-submitted" > < p className = { styles . amountLabel } > Submitted < /p> < /Localized> < /div> < /Flex> < /HorizontalGutter>); } ; export default RecentHistory ;