refactor: extract ui/divider

Author: wackerow

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/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/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" }}