feat: add leaderboard

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<LeaderboardTableProps> = () => {
+  return (
+    <TableWrapper>
+      <TableColumn>
+        <TableList>
+          <TableRow className="highlight">
+            <RankInfo>
+              <Rank>2556.</Rank>
+              <Name>Raging Bull</Name>
+              <YouLabel>[you]</YouLabel>
+            </RankInfo>
+            <Points>4,278</Points>
+          </TableRow>
+          {leaderboardData.map((item) => (
+            <TableRow key={item.rank}>
+              <RankInfo>
+                <Rank>{item.rank}.</Rank>
+                <Name>{item.name}</Name>
+              </RankInfo>
+              <Points>{item.points.toLocaleString()}</Points>
+            </TableRow>
+          ))}
+        </TableList>
+      </TableColumn>
+      <TableColumn>
+        <ComingSoonWrapper>
+          <ComingSoonText>Coming Soon</ComingSoonText>
+        </ComingSoonWrapper>
+      </TableColumn>
+    </TableWrapper>
+  )
+}
+
+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

src/components/Leaderboard/LeaderboardTable/index.ts

@@ -0,0 +1 @@
+export { default as LeaderboardTable } from './LeaderboardTable'

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<LeaderboardTabsProps> = () => {
+  return (
+    <TabsWrapper>
+      <TabButton className="active">Individual</TabButton>
+      <TabButton>Archetypes</TabButton>
+    </TabsWrapper>
+  )
+}
+
+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

src/components/Leaderboard/LeaderboardTabs/index.ts

@@ -0,0 +1 @@
+export { default as LeaderboardTabs } from './LeaderboardTabs'

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<LeaderboardProps> = () => {
+  return (
+    <Container>
+      <LeaderboardTabs />
+      <LeaderboardTable />
+    </Container>
+  )
+}
+
+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

src/containers/Leaderboard/index.ts

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

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(<Component {...pageProps} />)}

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 (
+    <>
+      <SEO />
+      <LeaderboardContainer />
+    </>
+  )
+}