Leaderboard component refactor

This commit is contained in:
mattyl006 2022-07-18 13:01:59 +02:00
parent d5aa78dbe6
commit e8652d593b
6 changed files with 124 additions and 106 deletions

View File

@ -0,0 +1,32 @@
import React from "react";
import Media from "react-media";
import theme from "../../../utils/theme";
import _mobileRender from "./_mobileRender";
import _desktopRender from "./_desktopRender";
const Leaderboard = () => {
const [variant, setVariant] = React.useState(0);
const mobileRender = () => {
return _mobileRender(variant, setVariant);
}
const desktopRender = () => {
return _desktopRender(variant, setVariant);
}
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
)
}
export default Leaderboard;

View File

@ -0,0 +1,44 @@
import {FlexColumn, FlexRow} from "../../../utils/containers";
import {H2, H3} from "../../../utils/fonts";
import theme from "../../../utils/theme";
import styled from "styled-components";
const BoardVariantDesktop = styled(FlexRow)`
transition: background-color 0.3s ease-in-out;
border: 1px solid ${({theme}) => theme.colors.green05};
background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
&:hover {
background-color: ${({theme}) => theme.colors.green05};
}
div {
text-transform: uppercase;
}
`;
const desktopRender = (variant, setVariant) => {
return (
<FlexColumn padding='24px' as='section'>
<H2 as='h2' margin='0 0 32px 0'>
Leaderboard
</H2>
<FlexRow border={`1px solid ${theme.colors.green05}`}>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={0 === variant} onClick={() => setVariant(0)}>
<H3 as='span'>
By user
</H3>
</BoardVariantDesktop>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={1 === variant} onClick={() => setVariant(1)}>
<H3 as='span'>
By metric
</H3>
</BoardVariantDesktop>
</FlexRow>
</FlexColumn>
);
}
export default desktopRender;

View File

@ -0,0 +1,46 @@
import {FlexColumn, FlexRow} from "../../../utils/containers";
import {H2} from "../../../utils/fonts";
import styled from "styled-components";
const BoardVariantMobile = styled(FlexRow)`
transition: color, background-color 0.3s ease-in-out;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
font-size: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
border-radius: 16px;
border: 1px solid ${({theme}) => theme.colors.dark};
padding: 6px 8px;
cursor: pointer;
box-shadow: ${({theme}) => theme.shadowRight};
* {
cursor: pointer;
}
&:hover {
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
}
`;
const mobileRender = (variant, setVariant) => {
return (
<FlexColumn padding='24px' as='section'>
<H2 as='h2' margin='0 0 12px 0'>
Leaderboard
</H2>
<FlexRow gap='12px' margin='0 0 20px 0'>
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
By user
</BoardVariantMobile>
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
By metric
</BoardVariantMobile>
</FlexRow>
</FlexColumn>
);
}
export default mobileRender;

View File

@ -0,0 +1 @@
export {default} from './Leaderboard';

View File

@ -1,105 +0,0 @@
import React from "react";
import {FlexColumn, FlexRow} from "../../utils/containers";
import {H2, H3} from "../../utils/fonts";
import Media from "react-media";
import theme from "../../utils/theme";
import styled from "styled-components";
const BoardVariantMobile = styled(FlexRow)`
transition: color, background-color 0.3s ease-in-out;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
font-size: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
border-radius: 16px;
border: 1px solid ${({theme}) => theme.colors.dark};
padding: 6px 8px;
cursor: pointer;
box-shadow: ${({theme}) => theme.shadowRight};
* {
cursor: pointer;
}
&:hover {
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
}
`;
const BoardVariantDesktop = styled(FlexRow)`
transition: background-color 0.3s ease-in-out;
border: 1px solid ${({theme}) => theme.colors.green05};
background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
&:hover {
background-color: ${({theme}) => theme.colors.green05};
}
div {
text-transform: uppercase;
}
`;
const Leaderboard = () => {
const [variant, setVariant] = React.useState(0);
const mobileRender = () => {
return (
<FlexColumn padding='24px' as='section'>
<H2 as='h2' margin='0 0 12px 0'>
Leaderboard
</H2>
<FlexRow gap='12px' margin='0 0 20px 0'>
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
By user
</BoardVariantMobile>
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
By metric
</BoardVariantMobile>
</FlexRow>
</FlexColumn>
);
}
const desktopRender = () => {
return (
<FlexColumn padding='24px' as='section'>
<H2 as='h2' margin='0 0 32px 0'>
Leaderboard
</H2>
<FlexRow border={`1px solid ${theme.colors.green05}`}>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={0 === variant} onClick={() => setVariant(0)}>
<H3 as='span'>
By user
</H3>
</BoardVariantDesktop>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={1 === variant} onClick={() => setVariant(1)}>
<H3 as='span'>
By metric
</H3>
</BoardVariantDesktop>
</FlexRow>
</FlexColumn>
);
}
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
)
}
export default Leaderboard;

View File

@ -5,7 +5,7 @@ import {H1, Medium} from "../utils/fonts";
import getChallenges from "../api/getChallenges"; import getChallenges from "../api/getChallenges";
import theme from "../utils/theme"; import theme from "../utils/theme";
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu"; import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
import Leaderboard from "../components/sections/Leaderboard"; import Leaderboard from "../components/sections/Leaderboar/Leaderboard";
import Readme from "../components/sections/Readme"; import Readme from "../components/sections/Readme";
import HowTo from "../components/sections/HowTo"; import HowTo from "../components/sections/HowTo";
import MyEntries from "../components/sections/MyEntries"; import MyEntries from "../components/sections/MyEntries";