feat: add leaderboard page

src/components/leaderboard/LeaderboardPage.tsx

@@ -0,0 +1,70 @@
+import { IoPeople } from 'react-icons/io5'
+import { SlQuestion } from 'react-icons/sl'
+import { PageContent } from '../main/PageWrapper'
+import DfCard from '../utils/cards/DfCard'
+import { MutedSpan } from '../utils/MutedText'
+
+export default function LeaderboardPage() {
+  return (
+    <PageContent withLargerMaxWidth meta={{ title: 'Active Staking Dashboard' }}>
+      <div className='d-flex align-items-end justify-content-between'>
+        <h1 className='DfUnboundedTitle ColorNormal mb-0'>Active Staking Dashboard</h1>
+        <span>Role:</span>
+      </div>
+      <div className='mt-4 GapBig' style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
+        <DfCard
+          className='d-flex flex-column GapSmall align-items-center'
+          variant='info'
+          withShadow={false}
+          style={{ gridRow: 'span 2' }}
+        >
+          <div
+            className='rounded-circle d-flex align-items-center justify-content-center'
+            style={{ background: 'white', width: '88px', height: '88px' }}
+          >
+            <IoPeople style={{ fontSize: '42px', color: '#5089F8' }} />
+          </div>
+          <div className='d-flex flex-column align-items-center'>
+            <span className='FontBig FontWeightSemibold'>Total Activity</span>
+            <MutedSpan>this week</MutedSpan>
+          </div>
+        </DfCard>
+        <StatisticCard />
+        <StatisticCard />
+        <StatisticCard />
+        <StatisticCard />
+      </div>
+      <div className='mt-4 GapLarge' style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+        <TopUsersTable />
+        <TopUsersTable />
+      </div>
+    </PageContent>
+  )
+}
+
+function TopUsersTable() {
+  return (
+    <DfCard withShadow={false} className='d-flex flex-column'>
+      <span className='FontWeightSemibold FontSemilarge'>Top Stakers this week</span>
+      <MutedSpan className='FontSmall mt-1'>
+        Stakers ranked based on the amount of SUB earned with Active Staking.
+      </MutedSpan>
+      <div className='mt-3'>asdfasdfdf</div>
+    </DfCard>
+  )
+}
+
+function StatisticCard() {
+  return (
+    <DfCard size='small' className='d-flex flex-column GapMini' withShadow={false}>
+      <div className='d-flex align-items-center ColorMuted GapTiny'>
+        <span className='FontSmall'>Total posts liked</span>
+        <SlQuestion className='FontTiny' />
+      </div>
+      <div className='d-flex align-items-center justify-content-between GapSmall mt-auto'>
+        <span className='FontWeightMedium FontBig'>125</span>
+        <MutedSpan>+25 today</MutedSpan>
+      </div>
+    </DfCard>
+  )
+}

src/components/main/PageWrapper.tsx

@@ -97,6 +97,7 @@ type Props = {
   outerClassName?: string
   withSidebar?: boolean
   withVoteBanner?: boolean
+  withLargerMaxWidth?: boolean
   creatorDashboardSidebarType?: CreatorDashboardSidebarType
 }
 
@@ -113,6 +114,7 @@ export const PageContent: FC<Props> = ({
   outerClassName,
   // withSidebar,
   children,
+  withLargerMaxWidth,
   creatorDashboardSidebarType,
 }) => {
   // const {
@@ -158,9 +160,20 @@ export const PageContent: FC<Props> = ({
               </div>
             </div>
           )}
-          <section className={clsx('DfSectionOuter', 'w-100', outerClassName)}>
+          <section
+            className={clsx(
+              'DfSectionOuter',
+              'w-100',
+              withLargerMaxWidth && 'DfSectionLarger',
+              outerClassName,
+            )}
+          >
             {/* {isPanels && <div className='DfLeftPanel DfPanel'>{leftPanel}</div>} */}
-            <Section className={outerClassName} outerClassName={outerClassName}>
+            <Section
+              withLargerMaxWidth={withLargerMaxWidth}
+              className={outerClassName}
+              outerClassName={outerClassName}
+            >
               {/* <Alert
                 className='mb-2'
                 message='Maintenance Alert'
@@ -172,6 +185,7 @@ export const PageContent: FC<Props> = ({
                 </>}
               /> */}
               <Section
+                withLargerMaxWidth={withLargerMaxWidth}
                 className={`${className}`}
                 outerClassName={outerClassName}
                 level={level}

src/components/utils/Section.tsx

@@ -8,10 +8,19 @@ type Props = React.PropsWithChildren<
     outerClassName?: string
     title?: React.ReactNode
     level?: number
+    withLargerMaxWidth?: boolean
   }
 >
 
-export const Section = ({ title, level = 2, className, id, outerClassName, children }: Props) => {
+export const Section = ({
+  title,
+  level = 2,
+  className,
+  id,
+  outerClassName,
+  children,
+  withLargerMaxWidth,
+}: Props) => {
   const renderTitle = () => {
     if (!title) return null
 
@@ -20,7 +29,7 @@ export const Section = ({ title, level = 2, className, id, outerClassName, child
   }
 
   return (
-    <div className={`${outerClassName} DfSectionOuter`}>
+    <div className={`${outerClassName} ${withLargerMaxWidth && 'DfSectionLarger'} DfSectionOuter`}>
       <section id={id} className={`DfSection ${className}`}>
         {renderTitle()}
         {children}

src/components/utils/cards/DfCard.tsx

@@ -1,8 +1,27 @@
 import clsx from 'clsx'
 import { HTMLProps } from 'react'
 
-export type DfCardProps = HTMLProps<HTMLDivElement>
+export type DfCardProps = Omit<HTMLProps<HTMLDivElement>, 'size'> & {
+  withShadow?: boolean
+  variant?: 'default' | 'info'
+  size?: 'medium' | 'small'
+}
 
-export default function DfCard({ className, ...props }: DfCardProps) {
-  return <div className={clsx('DfCard', className)} {...props} />
+const variants: Record<NonNullable<DfCardProps['variant']>, string> = {
+  default: '',
+  info: 'DfCardInfo',
+}
+export default function DfCard({
+  className,
+  withShadow = true,
+  variant = 'default',
+  size = 'medium',
+  ...props
+}: DfCardProps) {
+  return (
+    <div
+      className={clsx('DfCard', !withShadow && 'NoShadow', variants[variant], size, className)}
+      {...props}
+    />
+  )
 }

src/pages/leaderboard/index.tsx

@@ -0,0 +1,3 @@
+import LeaderboardPage from 'src/components/leaderboard/LeaderboardPage'
+
+export default LeaderboardPage

src/styles/subsocial.scss

@@ -1198,6 +1198,10 @@ hr {
     position: relative;
     z-index: 0;
 
+    &.DfSectionLarger {
+      max-width: calc(890px + #{$space_normal} * 2);
+    }
+
     .DfSectionOuter {
       width: 100%;
     }
@@ -2019,6 +2023,20 @@ hr {
   background-color: #fff;
   padding: $space_big;
   border-radius: $border_radius_huge;
+
+  &.NoShadow {
+    box-shadow: none !important;
+  }
+
+  &.DfCardInfo {
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    background: #edf4ff;
+  }
+
+  &.small {
+    padding: $space_normal;
+    border-radius: $border_radius_big;
+  }
 }
 
 .DfMobileOnBoarding {