Hi, How to create this.

No description
3 Replies
angell1389
angell138910mo ago
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?
MarkBoots
MarkBoots10mo ago
i would just pass in an empty div, then you can keep the columns as is
<div className="subtitle">{ props.subtitle ?? "" }</div>
<div className="subtitle">{ props.subtitle ?? "" }</div>
or do you want that image to be closer to the number if subtitle is empty?
angell1389
angell138910mo ago
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
Want results from more Discord servers?
Add your server