refactor: extract ui/divider

src/@chakra-ui/components/components.utils.ts

@@ -9,7 +9,6 @@ const {
   Checkbox: checkboxDefaultTheme,
   CloseButton: closeButtonDefaultTheme,
   Code: codeDefaultTheme,
-  Divider: dividerDefaultTheme,
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,
@@ -37,7 +36,6 @@ export {
   checkboxDefaultTheme,
   closeButtonDefaultTheme,
   codeDefaultTheme,
-  dividerDefaultTheme,
   drawerDefaultTheme,
   formDefaultTheme,
   formLabelDefaultTheme,

src/@chakra-ui/components/index.ts

@@ -8,7 +8,6 @@ import { Checkbox } from "./Checkbox"
 import {
   closeButtonDefaultTheme,
   codeDefaultTheme,
-  dividerDefaultTheme,
   drawerDefaultTheme,
   formDefaultTheme,
   formLabelDefaultTheme,
@@ -39,7 +38,6 @@ export default {
   Checkbox,
   CloseButton: closeButtonDefaultTheme,
   Code: codeDefaultTheme,
-  Divider: dividerDefaultTheme,
   Drawer: drawerDefaultTheme,
   Form: formDefaultTheme,
   FormLabel: formLabelDefaultTheme,

src/components/MdComponents/index.tsx

@@ -27,6 +27,7 @@ import LocaleDateTime from "../LocaleDateTime"
 import MainArticle from "../MainArticle"
 import { StandaloneQuizWidget } from "../Quiz/QuizWidget"
 import { ButtonLink } from "../ui/buttons/Button"
+import { Divider } from "../ui/divider"
 import { Flex } from "../ui/flex"
 import { ListItem, OrderedList, UnorderedList } from "../ui/list"
 import { mdxTableComponents } from "../ui/Table"
@@ -180,10 +181,6 @@ export const MobileButtonDropdown = ({
   <StyledButtonDropdown className={cn("mb-0", className)} {...props} />
 )
 
-export const Divider = () => (
-  <div className="my-16 h-1 w-[10%] bg-primary-high-contrast" />
-)
-
 // All custom React components
 export const reactComponents = {
   Badge,

src/components/ui/divider.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+const Divider = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("my-16 h-1 w-[10%] bg-primary-high-contrast", className)}
+    {...props}
+  />
+))
+
+Divider.displayName = "Divider"
+
+export { Divider }

src/layouts/Docs.tsx

@@ -4,7 +4,6 @@ import {
   Badge,
   Box,
   type BoxProps,
-  Divider as ChakraDivider,
   Flex,
   type FlexProps,
   type ListProps,
@@ -42,6 +41,7 @@ import SideNav from "@/components/SideNav"
 import SideNavMobile from "@/components/SideNavMobile"
 import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 import { mdxTableComponents } from "@/components/ui/Table"
 import YouTube from "@/components/YouTube"
 
@@ -58,15 +58,6 @@ const Page = (props: ChildOnlyProp & Pick<FlexProps, "dir">) => (
   />
 )
 
-const Divider = () => (
-  <ChakraDivider
-    my={16}
-    w="10%"
-    borderBottomWidth={1}
-    borderColor="homeDivider"
-  />
-)
-
 type ContentContainerProps = Pick<BoxProps, "children" | "dir">
 
 const ContentContainer = (props: ContentContainerProps) => (

src/layouts/Tutorial.tsx

@@ -4,7 +4,6 @@ import {
   Badge,
   Box,
   type BoxProps,
-  Divider,
   Flex,
   Kbd,
   Text,
@@ -35,6 +34,7 @@ import {
 import TableOfContents from "@/components/TableOfContents"
 import TooltipLink from "@/components/TooltipLink"
 import TutorialMetadata from "@/components/TutorialMetadata"
+import { Divider } from "@/components/ui/divider"
 import { mdxTableComponents } from "@/components/ui/Table"
 import YouTube from "@/components/YouTube"
 
@@ -93,16 +93,7 @@ const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   />
 )
 
-const StyledDivider = (props) => (
-  <Divider
-    my={16}
-    w="10%"
-    h="1"
-    opacity="1"
-    backgroundColor="homeDivider"
-    {...props}
-  />
-)
+const StyledDivider = (props) => <Divider {...props} />
 
 const Paragraph = (props: TextProps) => (
   <Text as="p" mt={8} mb={4} mx={0} color="text300" fontSize="md" {...props} />

src/pages/bug-bounty.tsx

@@ -28,6 +28,7 @@ import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -168,10 +169,6 @@ const FullLeaderboardContainer = (props: ChildOnlyProp) => (
 
 const On = () => <Box w="8px" h="8px" bg="success400" borderRadius="64px" />
 
-const Divider = () => (
-  <Box my="16" mx="0" w="10%" h="1" backgroundColor="homeDivider" />
-)
-
 const Contact = (props: ChildOnlyProp) => (
   <Box
     borderRadius="2px"

src/pages/community.tsx

@@ -24,6 +24,7 @@ import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import OldHeading from "@/components/OldHeading"
 import PageMetadata from "@/components/PageMetadata"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -79,10 +80,6 @@ const Content = ({ children }: ChildOnlyProp) => {
   )
 }
 
-const Divider = () => {
-  return <Box my={16} w="10%" h={1} bgColor="homeDivider" />
-}
-
 const Page = ({ children }: ChildOnlyProp) => {
   return (
     <Flex

src/pages/dapps.tsx

@@ -14,8 +14,6 @@ import {
   Box,
   Button,
   type ButtonProps,
-  Divider as ChakraDivider,
-  type DividerProps,
   Flex,
   type FlexProps,
   Heading,
@@ -48,6 +46,7 @@ import ProductListComponent, {
   type ProductListProps,
 } from "@/components/ProductList"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -137,19 +136,6 @@ const Page = (props: ChildOnlyProp & FlexProps) => (
   />
 )
 
-const Divider = (props: DividerProps) => (
-  <ChakraDivider
-    opacity={1}
-    my={16}
-    w="10%"
-    borderBottomWidth="0.25rem"
-    borderColor="homeDivider"
-    {...props}
-  />
-)
-
-const CenterDivider = () => <Divider display="flex" justifyContent="center" />
-
 const Content = (props: ChildOnlyProp) => (
   <Box py={4} px={8} w="full" {...props} />
 )
@@ -1826,7 +1812,7 @@ const DappsPage = () => {
         )}
         {/* General content for all categories */}
         <Content>
-          <CenterDivider />
+          <Divider />
           {categories[selectedCategory].benefits && (
             <Box mt={12}>
               <H2>

src/pages/eth.tsx

@@ -32,6 +32,7 @@ import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -59,10 +60,6 @@ const Content = (props: ChildOnlyProp) => (
   <Box w="full" px={8} py={4} {...props} />
 )
 
-const Divider = () => (
-  <Box my={16} mx={0} w="10%" h={1} backgroundColor="homeDivider" />
-)
-
 const GrayContainer = (props: ChildOnlyProp) => (
   <Box
     width="full"

src/pages/gas.tsx

@@ -40,6 +40,7 @@ import PageHero from "@/components/PageHero"
 import PageMetadata from "@/components/PageMetadata"
 import Pill from "@/components/Pill"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -55,10 +56,6 @@ import whatIsEthereumImg from "@/public/images/what-is-ethereum.png"
 
 const Content = (props: BoxProps) => <Box px={8} w="full" {...props} />
 
-const Divider = (props: BoxProps) => (
-  <Box my={16} w="10%" h={1} bg="homeDivider" {...props} />
-)
-
 const Page = (props: FlexProps) => (
   <Flex
     as={MainArticle}

src/pages/get-eth.tsx

@@ -24,11 +24,11 @@ import { Image } from "@/components/Image"
 import InfoBanner from "@/components/InfoBanner"
 import InlineLink from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
-import { Divider } from "@/components/MdComponents"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"

src/pages/roadmap/vision.tsx

@@ -5,7 +5,6 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import type { ComponentPropsWithRef } from "react"
 import {
   Box,
-  Divider,
   Flex,
   type FlexProps,
   Heading,
@@ -32,6 +31,7 @@ import PageHero, {
 } from "@/components/PageHero"
 import PageMetadata from "@/components/PageMetadata"
 import Trilemma from "@/components/Trilemma"
+import { Divider } from "@/components/ui/divider"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -50,15 +50,6 @@ const Page = (props: ChildOnlyProp) => (
   />
 )
 
-const PageDivider = () => (
-  <Divider
-    my={16}
-    w="10%"
-    borderBottomWidth="0.25rem"
-    borderColor="homeDivider"
-  />
-)
-
 const PageContent = (props: ChildOnlyProp) => (
   <Flex flexDirection="column" gap="8" py={4} px={8} w="full" {...props} />
 )
@@ -169,7 +160,7 @@ const VisionPage = () => {
         description={t("page-roadmap-vision-meta-desc")}
       />
       <PageHero content={heroContent} />
-      <PageDivider />
+      <Divider />
       <PageContent>
         <Breadcrumbs slug={pathname} startDepth={1} />
         <CentralContent>
@@ -208,7 +199,7 @@ const VisionPage = () => {
           <Text>{t("page-roadmap-vision-upgrade-needs-desc-6")}</Text>
         </CentralContent>
       </PageContent>
-      <PageDivider />
+      <Divider />
       <PageContent>
         <CenterH2>{t("page-roadmap-vision-problems")}</CenterH2>
         <ProblemCardContainer>
@@ -225,7 +216,7 @@ const VisionPage = () => {
       <TrilemmaContent>
         <Trilemma />
       </TrilemmaContent>
-      <PageDivider />
+      <Divider />
       <PageContent>
         <CentralContent>
           <CenterH2>{t("page-roadmap-vision-understanding")}</CenterH2>
@@ -292,7 +283,7 @@ const VisionPage = () => {
           </InfoBanner>
         </CentralContent>
       </PageContent>
-      <PageDivider />
+      <Divider />
       <FeedbackCard />
     </Page>
   )

src/pages/run-a-node.tsx

@@ -39,6 +39,7 @@ import PageHero from "@/components/PageHero"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget as QuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 import { Stack, VStack } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
@@ -57,8 +58,6 @@ import ethereumInside from "@/public/images/run-a-node/ethereum-inside.png"
 import Terminal from "@/public/images/run-a-node/terminal.svg"
 import leslie from "@/public/images/upgrades/upgrade_rhino.png"
 
-const Divider = () => <Box my="16" w="10%" h="1" bg="homeDivider" />
-
 const GappedPage = (props: ChildOnlyProp) => (
   <Flex
     as={MainArticle}

src/pages/stablecoins.tsx

@@ -35,6 +35,7 @@ import StablecoinBoxGrid from "@/components/StablecoinBoxGrid"
 import StablecoinsTable from "@/components/StablecoinsTable"
 import Tooltip from "@/components/Tooltip"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 
 import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
@@ -194,8 +195,6 @@ export const getStaticProps = (async ({ locale }) => {
 
 const Content = (props: BoxProps) => <Box py={4} px={8} w="full" {...props} />
 
-const Divider = () => <Box my={16} w="10%" h={1} bg="homeDivider" />
-
 const EditorsChoice = (props: FlexProps) => (
   <Flex
     flexDirection={{ base: "column-reverse", lg: "row" }}

src/pages/staking/index.tsx

@@ -32,6 +32,7 @@ import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallou
 import StakingHierarchy from "@/components/Staking/StakingHierarchy"
 import StakingStatsBox from "@/components/Staking/StakingStatsBox"
 import Translation from "@/components/Translation"
+import { Divider } from "@/components/ui/divider"
 import { Flex, Stack, VStack } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
 import { ListItem, UnorderedList } from "@/components/ui/list"
@@ -59,10 +60,6 @@ const PageContainer = (props: ChildOnlyProp) => (
   <VStack className="mx-auto w-full gap-0" {...props} />
 )
 
-const Divider = () => (
-  <div className="my-8 h-1 w-[10%] self-center bg-primary-high-contrast" />
-)
-
 const HeroStatsWrapper = (props: ChildOnlyProp) => (
   <VStack className="w-full gap-0 bg-main-gradient" {...props} />
 )