Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 1x 1x 1x 8x 8x 1x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import { Card, Layout, Text, IconName, Container } from '@wings-software/uicore'
import { Color, FontVariation } from '@harness/design-system'
import React from 'react'
import css from './RecommendationSavingsCard.module.scss'
interface RecommendationSavingsCardProps {
title: string
amount: string
subTitle?: string
amountSubTitle?: string
iconName?: IconName
}
const RecommendationSavingsCard: React.FC<RecommendationSavingsCardProps> = props => {
const { title, amount, subTitle, amountSubTitle, iconName } = props
return (
<Card className={css.savingsCard} elevation={1}>
<Layout.Vertical spacing="small">
<Text color={Color.GREY_500} font={{ variation: FontVariation.H6 }}>
{title}
</Text>
<Container>
<Text
inline
font={{ variation: FontVariation.H3 }}
color={iconName ? Color.GREEN_700 : Color.GREY_800}
icon={iconName ? iconName : undefined}
iconProps={{ size: 28 }}
>
{amount}
</Text>
{amountSubTitle ? (
<Text inline color={Color.GREY_400} font={{ variation: FontVariation.TINY }} margin={{ left: 'xsmall' }}>
{amountSubTitle}
</Text>
) : null}
</Container>
{subTitle ? (
<Text color={Color.GREY_600} font={{ variation: FontVariation.TINY }}>
{subTitle}
</Text>
) : null}
</Layout.Vertical>
</Card>
)
}
export default RecommendationSavingsCard
|