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 theme from "../utils/theme";
|
||||
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 HowTo from "../components/sections/HowTo";
|
||||
import MyEntries from "../components/sections/MyEntries";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user