I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete.
https://i.sstatic.net/BdBLE.png
My goal is to create separate columns for each social network - Facebook, Instagram, and Reddit. This way, all cards within the same column will have matching colors.
However, I am facing challenges in achieving this as Mui seems to be arranging the data row by row instead of column by column, even though my API data is already sorted by social network.
Below is the code snippet for rendering the athletes' cards:
import React from 'react'
import { AthleteCardContainer, AthleteImage, AthleteDetailsContainer, TopContainer, BottomContainer, FBLogo, RedditLogo, InstaLogo, LinkIconLogo } from '../styles/athlete-styles'
export const AtheleteCard = ({athlete}) => {
function numFormatter(num) {
// Number formatting logic
}
return (
<AthleteCardContainer social={athlete.platform}>
<AthleteImage src={athlete.profileImage}/>
<AthleteDetailsContainer>
<TopContainer>
<h1>{athlete.name}</h1>
<span>@{athlete.handle}</span>
</TopContainer>
<BottomContainer>
<h3>{athlete.platform === "Instagram" ? <InstaLogo/> : athlete.platform === "Facebook" ? <FBLogo/> : athlete.platform === "Reddit" ? <RedditLogo/> : null} {numFormatter(athlete.subscriberCount)}</h3>
<a href={athlete.url}><p><LinkIconLogo/>{athlete.url}</p></a>
</BottomContainer>
</AthleteDetailsContainer>
</AthleteCardContainer>
)
}
And here is the code related to displaying the grid itself:
export const Athletes = () => {
const dispatch = useDispatch();
const athletes = useSelector(state => state.athleteReducer.athletes.athletes)
useEffect(() => {
dispatch(actions.getAthletes());
}, [])
console.log(athletes, "from selector")
return (
<div>
<Grid container >
{athletes.map(athlete => (
<Grid item xs={12} md={6} lg={4}>
<AtheleteCard athlete={athlete}/>
</Grid>
))}
</Grid>
</div>
);
};