refactor: TableOfContents variants; deprecate LeftNavBar

app/[locale]/contributing/translation-program/translatathon/leaderboard/page.tsx

@@ -2,12 +2,14 @@ import { setRequestLocale } from "next-intl/server"
 
 import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
 import ContentHero, { ContentHeroProps } from "@/components/Hero/ContentHero"
-import LeftNavBar from "@/components/LeftNavBar"
 import MainArticle from "@/components/MainArticle"
+import TableOfContents from "@/components/TableOfContents"
 import { ApplyNow } from "@/components/Translatathon/ApplyNow"
+import { APPLICATION_END_DATE } from "@/components/Translatathon/constants"
 import PaperformCallToAction from "@/components/Translatathon/PaperformCallToAction"
 
 import { dataLoader } from "@/lib/utils/data/dataLoader"
+import { isDateReached } from "@/lib/utils/date"
 import { getMetadata } from "@/lib/utils/metadata"
 
 import { BASE_TIME_UNIT } from "@/lib/constants"
@@ -96,27 +98,31 @@ const Page = async ({ params }: { params: Promise<{ locale: string }> }) => {
     ],
   }
 
+  const tocItems = [
+    {
+      title: "Leaderboard",
+      url: "#leaderboard",
+    },
+  ]
+
+  if (isDateReached(APPLICATION_END_DATE)) {
+    tocItems.push({
+      title: "Apply now",
+      url: "#apply-now",
+    })
+  }
+
   return (
     <>
       <div className="relative mt-4">
         <ContentHero {...heroProps} />
       </div>
 
       <div className="mx-auto mb-16 flex w-full flex-col justify-between lg:flex-row lg:pt-16 lg:first-of-type:[&_h2]:mt-0">
-        <LeftNavBar
-          className="max-lg:hidden"
+        <TableOfContents
           dropdownLinks={dropdownLinks}
-          tocItems={[
-            {
-              title: "Leaderboard",
-              url: "#leaderboard",
-            },
-            {
-              title: "Apply now",
-              url: "#apply-now",
-            },
-          ]}
-          maxDepth={0}
+          items={tocItems}
+          variant="left"
         />
         <MainArticle className="relative flex-[1_1_992px] px-8 pb-8">
           <div className="flex flex-col gap-4">
@@ -143,9 +149,11 @@ const Page = async ({ params }: { params: Promise<{ locale: string }> }) => {
               </div>
             )}
           </div>
-          <div id="apply-now">
-            <ApplyNow />
-          </div>
+          {isDateReached(APPLICATION_END_DATE) && (
+            <div id="apply-now">
+              <ApplyNow />
+            </div>
+          )}
         </MainArticle>
       </div>
     </>

app/[locale]/learn/page.tsx

@@ -13,9 +13,9 @@ import FileContributors from "@/components/FileContributors"
 import { HubHero } from "@/components/Hero"
 import type { HubHeroProps } from "@/components/Hero/HubHero"
 import { Image, ImageProps } from "@/components/Image"
-import LeftNavBar from "@/components/LeftNavBar"
 import MainArticle from "@/components/MainArticle"
 import { ContentContainer } from "@/components/MdComponents"
+import TableOfContents from "@/components/TableOfContents"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Center, Flex, Stack } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
@@ -185,11 +185,7 @@ export default async function Page({ params }: { params: Promise<Params> }) {
         asChild
       >
         <MainArticle>
-          <LeftNavBar
-            tocItems={tocData}
-            // TODO: Remove `!` flag once this component is migrated to ShadCN
-            className="max-lg:!hidden"
-          />
+          <TableOfContents items={tocData} variant="left" />
 
           <ContentContainer id="content">
             <Section

app/[locale]/staking/_components/staking.tsx

@@ -13,13 +13,13 @@ import Card from "@/components/Card"
 import ExpandableCard from "@/components/ExpandableCard"
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
-import LeftNavBar from "@/components/LeftNavBar"
 import { ContentContainer, Page } from "@/components/MdComponents"
 import MobileButtonDropdown from "@/components/MobileButtonDropdown"
 import PageHero from "@/components/PageHero"
 import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallout"
 import StakingHierarchy from "@/components/Staking/StakingHierarchy"
 import StakingStatsBox from "@/components/Staking/StakingStatsBox"
+import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
 import {
   ButtonLink,
@@ -251,11 +251,10 @@ const StakingPage = ({
         <StakingStatsBox data={data} />
       </HeroStatsWrapper>
       <Page>
-        <LeftNavBar
+        <TableOfContents
+          items={tocArray}
+          variant="left"
           dropdownLinks={dropdownLinks}
-          tocItems={tocArray}
-          // TODO: Remove bang after this component is migrated to Tailwind
-          className="max-lg:!hidden"
         />
         <ContentContainer>
           <Flex className="mt-16 flex-col gap-16 lg:mt-0">

app/[locale]/what-is-ethereum/page.tsx

@@ -167,8 +167,8 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
         </div>
 
         <div className="row-start-1 lg:col-start-2 lg:row-span-2">
-          <TableOfContents variant="beginner" items={tocItems} isMobile />
-          <TableOfContents variant="beginner" items={tocItems} />
+          <TableOfContents variant="card" items={tocItems} isMobile />
+          <TableOfContents variant="card" items={tocItems} />
         </div>
 
         <div className="max-w-[50rem] space-y-14 lg:col-start-1 lg:row-start-2">

src/components/TableOfContents/ItemsList.tsx

@@ -4,16 +4,29 @@ import type { ToCItem } from "@/lib/types"
 
 import ToCLink from "@/components/TableOfContents/TableOfContentsLink"
 
-const variants = cva("mb-2 last:mb-0", {
+const itemVariants = cva("last:mb-0", {
   variants: {
     variant: {
-      default: "",
-      beginner:
-        "[&:has([data-state-active='true'])]:text-primary hover:text-primary-hover list-item",
+      docs: "mb-2",
+      card: "[&:has([data-state-active='true'])]:text-primary hover:text-primary-hover list-item",
+      left: "mb-4 list-none text-xl",
     },
   },
   defaultVariants: {
-    variant: "default",
+    variant: "docs",
+  },
+})
+
+const listVariants = cva("", {
+  variants: {
+    variant: {
+      docs: "m-0 mt-2 list-none gap-2 ps-2 text-sm",
+      card: "",
+      left: "",
+    },
+  },
+  defaultVariants: {
+    variant: "docs",
   },
 })
 
@@ -22,7 +35,7 @@ export type ItemsListProps = {
   depth: number
   maxDepth: number
   activeHash?: string
-} & VariantProps<typeof variants>
+} & VariantProps<typeof itemVariants>
 
 const ItemsList = ({
   items,
@@ -39,15 +52,15 @@ const ItemsList = ({
       {items.map((item, index) => {
         const { title, items } = item
         return (
-          <li key={index} className={variants({ variant })} {...rest}>
+          <li key={index} className={itemVariants({ variant })} {...rest}>
             <ToCLink
               variant={variant}
               depth={depth}
               item={item}
               activeHash={activeHash}
             />
             {items && (
-              <ul key={title} className="m-0 mt-2 list-none gap-2 ps-2 text-sm">
+              <ul key={title} className={listVariants({ variant })}>
                 <ItemsList
                   items={items}
                   depth={depth + 1}

src/components/TableOfContents/TableOfContentsLink.tsx

@@ -7,16 +7,17 @@ import { cn } from "@/lib/utils/cn"
 import { BaseLink } from "../ui/Link"
 
 const variants = cva(
-  "group relative inline-block w-full py-0.5 text-body-medium no-underline lg:w-auto",
+  "group relative inline-block w-full text-body-medium no-underline lg:w-auto",
   {
     variants: {
       variant: {
-        default: "",
-        beginner: "[&_[data-label='marker']]:!hidden inline leading-base",
+        docs: "py-0.5",
+        card: "[&_[data-label='marker']]:!hidden inline leading-base",
+        left: "",
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: "docs",
     },
   }
 )

src/components/TableOfContents/TableOfContentsMobile.tsx

@@ -19,13 +19,13 @@ import { useTranslation } from "@/hooks/useTranslation"
 const variants = cva("flex w-full justify-between lg:hidden", {
   variants: {
     variant: {
-      default: "",
-      beginner:
-        "[&>span]:flex-none mb-16 justify-center rounded-lg border-border bg-accent-a/10 text-lg font-bold",
+      docs: "",
+      card: "[&>span]:flex-none mb-16 justify-center rounded-lg border-border bg-accent-a/10 text-lg font-bold",
+      left: "",
     },
   },
   defaultVariants: {
-    variant: "default",
+    variant: "docs",
   },
 })