3 Replies
where Test description can be optional, can present and not present.
<GridRow subtitle={props.subtitle}>
<div className="card_count" style={props.style?.count}>{formattedNumber(props.count)}</div>
{props.subtitle ? <div className="subtitle">{props.subtitle}</div> : null}
<img className="icon" src={props.secondaryImage} />
</GridRow> where
const GridRow = styled.div<{subtitle?: string}>
display: grid;
grid-template-columns: ${(props) => (props.subtitle ? 'auto 1fr auto' : '1fr auto')};
align-items: center;
column-gap: 3.125rem;
;
like this, but i wanted to check instead of conditionally checking that subtitle exists is there any other way to do this?i would just pass in an empty div, then you can keep the columns as is
or do you want that image to be closer to the number if subtitle is empty?
No , the image always have to be at the end
I tried the above solution but the image became closer to 88 before, so shifted to the solution that I send.
But i will try checking it out and get back asap