From e8652d593be62e36c494552244e4616f76075511 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Mon, 18 Jul 2022 13:01:59 +0200 Subject: [PATCH] Leaderboard component refactor --- .../sections/Leaderboar/Leaderboard.js | 32 ++++++ .../sections/Leaderboar/_desktopRender.js | 44 ++++++++ .../sections/Leaderboar/_mobileRender.js | 46 ++++++++ src/components/sections/Leaderboar/index.js | 1 + src/components/sections/Leaderboard.js | 105 ------------------ src/pages/Challenge.js | 2 +- 6 files changed, 124 insertions(+), 106 deletions(-) create mode 100644 src/components/sections/Leaderboar/Leaderboard.js create mode 100644 src/components/sections/Leaderboar/_desktopRender.js create mode 100644 src/components/sections/Leaderboar/_mobileRender.js create mode 100644 src/components/sections/Leaderboar/index.js delete mode 100644 src/components/sections/Leaderboard.js diff --git a/src/components/sections/Leaderboar/Leaderboard.js b/src/components/sections/Leaderboar/Leaderboard.js new file mode 100644 index 0000000..55f094c --- /dev/null +++ b/src/components/sections/Leaderboar/Leaderboard.js @@ -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 ( + <> + + {mobileRender()} + + + {desktopRender()} + + + ) + + +} + +export default Leaderboard; \ No newline at end of file diff --git a/src/components/sections/Leaderboar/_desktopRender.js b/src/components/sections/Leaderboar/_desktopRender.js new file mode 100644 index 0000000..dc7d4ac --- /dev/null +++ b/src/components/sections/Leaderboar/_desktopRender.js @@ -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 ( + +

+ Leaderboard +

+ + setVariant(0)}> +

+ By user +

+ + setVariant(1)}> +

+ By metric +

+ + + + ); +} + +export default desktopRender; \ No newline at end of file diff --git a/src/components/sections/Leaderboar/_mobileRender.js b/src/components/sections/Leaderboar/_mobileRender.js new file mode 100644 index 0000000..db25ec2 --- /dev/null +++ b/src/components/sections/Leaderboar/_mobileRender.js @@ -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 ( + +

+ Leaderboard +

+ + setVariant(0)}> + By user + + setVariant(1)}> + By metric + + + + ); +} + +export default mobileRender; \ No newline at end of file diff --git a/src/components/sections/Leaderboar/index.js b/src/components/sections/Leaderboar/index.js new file mode 100644 index 0000000..b9cf94c --- /dev/null +++ b/src/components/sections/Leaderboar/index.js @@ -0,0 +1 @@ +export {default} from './Leaderboard'; \ No newline at end of file diff --git a/src/components/sections/Leaderboard.js b/src/components/sections/Leaderboard.js deleted file mode 100644 index 9fa18b0..0000000 --- a/src/components/sections/Leaderboard.js +++ /dev/null @@ -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 ( - -

- Leaderboard -

- - setVariant(0)}> - By user - - setVariant(1)}> - By metric - - - - ); - } - - const desktopRender = () => { - return ( - -

- Leaderboard -

- - setVariant(0)}> -

- By user -

- - setVariant(1)}> -

- By metric -

- - - - ); - } - - - return ( - <> - - {mobileRender()} - - - {desktopRender()} - - - ) - - -} - -export default Leaderboard; \ No newline at end of file diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js index 22a0800..d183b1d 100644 --- a/src/pages/Challenge.js +++ b/src/pages/Challenge.js @@ -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";