From 86a69c3040adb901fd42f9b24c9f4f064106b3ff Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 13 Sep 2024 18:26:07 +0900 Subject: [PATCH] feat: add leaderboard --- .../LeaderboardTable/LeaderboardTable.tsx | 129 ++++++++++++++++++ .../Leaderboard/LeaderboardTable/index.ts | 1 + .../LeaderboardTabs/LeaderboardTabs.tsx | 39 ++++++ .../Leaderboard/LeaderboardTabs/index.ts | 1 + .../Leaderboard/LeaderboardContainer.tsx | 28 ++++ src/containers/Leaderboard/index.ts | 1 + src/pages/_app.tsx | 4 + src/pages/leaderboard/index.tsx | 13 ++ 8 files changed, 216 insertions(+) create mode 100644 src/components/Leaderboard/LeaderboardTable/LeaderboardTable.tsx create mode 100644 src/components/Leaderboard/LeaderboardTable/index.ts create mode 100644 src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx create mode 100644 src/components/Leaderboard/LeaderboardTabs/index.ts create mode 100644 src/containers/Leaderboard/LeaderboardContainer.tsx create mode 100644 src/containers/Leaderboard/index.ts create mode 100644 src/pages/leaderboard/index.tsx diff --git a/src/components/Leaderboard/LeaderboardTable/LeaderboardTable.tsx b/src/components/Leaderboard/LeaderboardTable/LeaderboardTable.tsx new file mode 100644 index 0000000000..9c274430d7 --- /dev/null +++ b/src/components/Leaderboard/LeaderboardTable/LeaderboardTable.tsx @@ -0,0 +1,129 @@ +import styled from '@emotion/styled' +import React from 'react' + +interface LeaderboardTableProps {} + +const leaderboardData = [ + { rank: 1, name: 'asockpuppet', points: 10456 }, + { rank: 2, name: 'craptastic', points: 15025 }, + { rank: 3, name: 'Waledia', points: 8987 }, + { rank: 4, name: 'FlatenEarth', points: 15025 }, + { rank: 5, name: 'Abiaand', points: 8987 }, + { rank: 6, name: '[Anonymous]', points: 7954 }, + { rank: 7, name: 'Freraand', points: 7954 }, + { rank: 8, name: 'Kiliwen', points: 7954 }, + { rank: 9, name: '[Anonymous]', points: 7954 }, + { rank: 10, name: 'Kaalelith', points: 4954 }, +] + +const LeaderboardTable: React.FC = () => { + return ( + + + + + + 2556. + Raging Bull + [you] + + 4,278 + + {leaderboardData.map((item) => ( + + + {item.rank}. + {item.name} + + {item.points.toLocaleString()} + + ))} + + + + + Coming Soon + + + + ) +} + +const TableWrapper = styled.section` + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-top: 32px; + width: 100%; + + @media (max-width: 991px) { + grid-template-columns: 1fr; + } +` + +const TableColumn = styled.div` + display: flex; + flex-direction: column; +` + +const TableList = styled.ul` + list-style-type: none; + padding: 0; + margin: 0; + font-weight: 400; +` + +const TableRow = styled.li` + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--grey-900); + padding: 8px; + margin-bottom: 2px; + + &.highlight { + background-color: var(--dark-orange); + color: var(--orange); + } +` + +const RankInfo = styled.div` + display: flex; + align-items: center; + gap: 16px; + font-size: 14px; +` + +const Rank = styled.span` + width: 44px; +` + +const Name = styled.span`` + +const YouLabel = styled.span` + opacity: 0.5; +` + +const Points = styled.div` + background-color: var(--grey-800); + font-size: 12px; + padding: 10px 16px; + width: 104px; + text-align: center; +` + +const ComingSoonWrapper = styled.div` + background-color: var(--grey-900); + display: flex; + align-items: center; + min-height: 52px; + padding: 16px 8px; +` + +const ComingSoonText = styled.span` + opacity: 0.6; + font-size: 14px; + line-height: 20px; +` + +export default LeaderboardTable diff --git a/src/components/Leaderboard/LeaderboardTable/index.ts b/src/components/Leaderboard/LeaderboardTable/index.ts new file mode 100644 index 0000000000..6ab80573ab --- /dev/null +++ b/src/components/Leaderboard/LeaderboardTable/index.ts @@ -0,0 +1 @@ +export { default as LeaderboardTable } from './LeaderboardTable' diff --git a/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx b/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx new file mode 100644 index 0000000000..802cd4bb2e --- /dev/null +++ b/src/components/Leaderboard/LeaderboardTabs/LeaderboardTabs.tsx @@ -0,0 +1,39 @@ +import styled from '@emotion/styled' +import React from 'react' + +interface LeaderboardTabsProps {} + +const LeaderboardTabs: React.FC = () => { + return ( + + Individual + Archetypes + + ) +} + +const TabsWrapper = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-top: 32px; + width: 100%; + + @media (max-width: 991px) { + grid-template-columns: 1fr; + } +` + +const TabButton = styled.button` + color: rgb(var(--lsd-text-primary)); + background: none; + border: none; + text-align: left; + font-size: 32px; + line-height: 40px; + padding: 0; + + cursor: pointer; +` + +export default LeaderboardTabs diff --git a/src/components/Leaderboard/LeaderboardTabs/index.ts b/src/components/Leaderboard/LeaderboardTabs/index.ts new file mode 100644 index 0000000000..8e8302ffd7 --- /dev/null +++ b/src/components/Leaderboard/LeaderboardTabs/index.ts @@ -0,0 +1 @@ +export { default as LeaderboardTabs } from './LeaderboardTabs' diff --git a/src/containers/Leaderboard/LeaderboardContainer.tsx b/src/containers/Leaderboard/LeaderboardContainer.tsx new file mode 100644 index 0000000000..3de656e84b --- /dev/null +++ b/src/containers/Leaderboard/LeaderboardContainer.tsx @@ -0,0 +1,28 @@ +import { LeaderboardTable } from '@/components/Leaderboard/LeaderboardTable' +import { LeaderboardTabs } from '@/components/Leaderboard/LeaderboardTabs' +import styled from '@emotion/styled' +import React from 'react' + +interface LeaderboardProps {} + +const Leaderboard: React.FC = () => { + return ( + + + + + ) +} + +const Container = styled.div` + background-color: #000; + display: flex; + flex-direction: column; + overflow: hidden; + padding: 28px 32px; + @media (max-width: 991px) { + padding: 0 20px; + } +` + +export default Leaderboard diff --git a/src/containers/Leaderboard/index.ts b/src/containers/Leaderboard/index.ts new file mode 100644 index 0000000000..1c64304f1c --- /dev/null +++ b/src/containers/Leaderboard/index.ts @@ -0,0 +1 @@ +export { default as Leaderboard } from './LeaderboardContainer' diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 8c21acebc0..96d5923a36 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -97,6 +97,10 @@ export default function App({ Component, pageProps }: AppLayoutProps) { padding: 0; list-style-type: none; } + + button { + padding: 0; + } `} /> {getLayout()} diff --git a/src/pages/leaderboard/index.tsx b/src/pages/leaderboard/index.tsx new file mode 100644 index 0000000000..5d8ef06133 --- /dev/null +++ b/src/pages/leaderboard/index.tsx @@ -0,0 +1,13 @@ +import { SEO } from '@/components/SEO' +import LeaderboardContainer from '@/containers/Leaderboard/LeaderboardContainer' + +type PageProps = {} + +export default function LeaderboardPage(props: PageProps) { + return ( + <> + + + + ) +}