mon-entreprise/source/components/Targets.tsx

35 lines
1.1 KiB
TypeScript

import { ThemeColorsContext } from 'Components/utils/colors'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
import './Targets.css'
export default function Targets() {
const colors = useContext(ThemeColorsContext)
const sitePaths = useContext(SitePathsContext)
const analysis = useSelector(analysisWithDefaultsSelector)
let { nodeValue, unité: unit, dottedName } = analysis.targets[0]
return (
<div id="targets">
<span className="icon"></span>
<span className="content" style={{ color: colors.textColor }}>
<span className="figure">
<span className="value">{nodeValue?.toFixed(1)}</span>{' '}
<span className="unit">{unit}</span>
</span>
<Link
title="Quel est calcul ?"
style={{ color: colors.color }}
to={sitePaths.documentation.rule(dottedName)}
className="explanation"
>
{emoji('📖')}
</Link>
</span>
</div>
)
}