Leaderboard component refactor
This commit is contained in:
parent
d5aa78dbe6
commit
e8652d593b
32
src/components/sections/Leaderboar/Leaderboard.js
Normal file
32
src/components/sections/Leaderboar/Leaderboard.js
Normal 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;
|
||||||
44
src/components/sections/Leaderboar/_desktopRender.js
Normal file
44
src/components/sections/Leaderboar/_desktopRender.js
Normal 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;
|
||||||
46
src/components/sections/Leaderboar/_mobileRender.js
Normal file
46
src/components/sections/Leaderboar/_mobileRender.js
Normal 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;
|
||||||
1
src/components/sections/Leaderboar/index.js
Normal file
1
src/components/sections/Leaderboar/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export {default} from './Leaderboard';
|
||||||
@ -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;
|
|
||||||
@ -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";
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user