Add total deal amount on top of pipeline column (#622)

Add total on top of pipeline column
This commit is contained in:
Félix Malfait
2023-07-12 18:22:25 +02:00
committed by GitHub
parent 1c3d68a537
commit e7a0f60ea0
2 changed files with 45 additions and 5 deletions

View File

@ -9,9 +9,15 @@ export const StyledColumn = styled.div`
padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledHeader = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
`;
export const StyledColumnTitle = styled.h3`
color: ${({ color }) => color};
font-family: 'Inter';
font-size: ${({ theme }) => theme.font.size.md};
font-style: normal;
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -20,16 +26,24 @@ export const StyledColumnTitle = styled.h3`
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
export const StyledAmount = styled.div`
color: ${({ theme }) => theme.font.color.light};
`;
type OwnProps = {
colorCode?: string;
title: string;
amount: number;
children: React.ReactNode;
};
export function BoardColumn({ colorCode, title, children }: OwnProps) {
export function BoardColumn({ colorCode, title, amount, children }: OwnProps) {
return (
<StyledColumn>
<StyledColumnTitle color={colorCode}> {title}</StyledColumnTitle>
<StyledHeader>
<StyledColumnTitle color={colorCode}> {title}</StyledColumnTitle>
{!!amount && <StyledAmount>${amount}</StyledAmount>}
</StyledHeader>
{children}
</StyledColumn>
);