Skip to content

Instantly share code, notes, and snippets.

const TeamRank = styled.span``;
const StatValue = styled.span``;
const StatName = styled.span``;
const StatRow = ({ stat }) => {
const { away, home } = stat;
return <div></div>
}
const TeamRank = styled.span``;
const StatValue = styled.span``;
const StatName = styled.span``;
const StatRow = ({ stat }) => {
const { away, home } = stat;
return (
@DZuz14
DZuz14 / index.jsx
Created February 9, 2021 19:07
stat
const Stat = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
`;
const TeamRank = styled.span`
<Stat>
<div>
<TeamRank>#{away.team_rank}</TeamRank>
<StatValue>{away.stat_value}</StatValue>
</div>
<StatName>{away.stat_name}</StatName>
<div>
<StatValue>{home.stat_value}</StatValue>
const TeamRank = styled.span`
color: #333;
margin-left: ${(props) => props.marginLeft || 0}px;
margin-right: ${(props) => props.marginRight || 0}px;
font-family: "Noto Sans JP", sans-serif;
color: #777;
`;
const StatValue = styled.span`
color: white;
<Stat>
<div>
<TeamRank marginRight={10}>#{away.team_rank}</TeamRank>
<StatValue>{away.stat_value}</StatValue>
</div>
<StatName>{away.stat_name}</StatName>
<div>
<StatValue>{home.stat_value}</StatValue>
@DZuz14
DZuz14 / index.jsx
Created February 10, 2021 16:48
bargroup
// other code omitted for brevity
const BarGroup = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
`;
@DZuz14
DZuz14 / index.jsx
Created February 10, 2021 16:52
bar
const Bar = styled.div`
position: relative;
height: 8px;
width: 49%;
background-color: #eeeeee;
border-radius: 50px;
margin-top: 2.5px;
`;
@DZuz14
DZuz14 / index.jsx
Created February 10, 2021 16:56
baradded
const StatRow = ({ stat }) => {
const { away, home } = stat;
return (
<div>
<Stat>
<div>
<TeamRank marginRight={10}>#{away.team_rank}</TeamRank>
<StatValue>{away.stat_value}</StatValue>
</div>
@DZuz14
DZuz14 / index.jsx
Created February 10, 2021 17:06
filler
const Filler = styled.div`
background-color: ${(props) => props.color || "transparent"};
width: ${(props) => props.width}%;
height: 100%;
border-radius: 50px;
`;