Merge pull request #13801 from ethereum/homepage-codeblock

migrate Codeblock component to tailwind, update colors

Author: pettinarip

src/components/Codeblock.tsx

@@ -6,34 +6,32 @@ import Highlight, {
   PrismTheme,
 } from "prism-react-renderer"
 import Prism from "prism-react-renderer/prism"
-import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
 
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
+import { Flex } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
 import { LINES_BEFORE_COLLAPSABLE } from "@/lib/constants"
+
+import useColorModeValue from "@/hooks/useColorModeValue"
 ;(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 
-const TopBarItem = (props: BoxProps) => {
-  const bgColor = useColorModeValue("#f7f7f7", "#363641")
-
+const TopBarItem = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <Box
-      border="1px"
-      borderRadius="base"
-      borderColor="searchBorder"
-      bg={bgColor}
-      ms={2}
-      py={1}
-      px={2}
-      _hover={{
-        cursor: "pointer",
-        color: "text100",
-        transform: "scale(1.04)",
-        boxShadow: "1px 1px 8px 1px rgba(0, 0, 0, 0.5)",
-      }}
+    <div
+      className={cn(
+        "ms-2 rounded border px-2 py-1 shadow-[1px_1px_8px_1px_rgba(var(--black),_0.5)] transition-transform duration-100",
+        "hover:scale-105 hover:cursor-pointer hover:bg-gray-200 hover:shadow-md hover:transition-transform hover:duration-100",
+        "bg-background-highlight hover:bg-background",
+        className
+      )}
       {...props}
     />
   )
@@ -42,8 +40,8 @@ const TopBarItem = (props: BoxProps) => {
 const codeTheme = {
   light: {
     plain: {
-      backgroundColor: "#fafafa",
-      color: "#333333",
+      backgroundColor: "#f7f7f7", // background-highlight (gray-50)
+      color: "#6C24DF", // primary (purple-600)
     },
     styles: [
       {
@@ -114,8 +112,8 @@ const codeTheme = {
   dark: {
     // Pulled from `defaultProps.theme` for potential customization
     plain: {
-      backgroundColor: "#2a2734",
-      color: "#9a86fd",
+      backgroundColor: "#121212", // background-highlight (gray-900)
+      color: "#B38DF0", // primary (purple-400)
     },
     styles: [
       {
@@ -251,18 +249,17 @@ const Codeblock = ({
   return (
     /* Overwrites codeblocks inheriting RTL styling in Right-To-Left script languages (e.g. Arabic) */
     /* Context: https://github.com/ethereum/ethereum-org-website/issues/6202 */
-    <Box position="relative" dir="ltr">
-      <Box
-        borderRadius="base"
-        border={fromHomepage ? "none" : "1px solid"}
-        borderColor="border"
-        maxH={
-          isCollapsed
+    <div className="relative" dir="ltr">
+      <div
+        className={cn(
+          "mb-4 overflow-scroll rounded",
+          fromHomepage && "mb-0 border"
+        )}
+        style={{
+          maxHeight: isCollapsed
             ? `calc((1.2rem * ${LINES_BEFORE_COLLAPSABLE}) + 4.185rem)`
-            : "none"
-        }
-        overflow="scroll"
-        mb={fromHomepage ? 0 : 4}
+            : "none",
+        }}
       >
         <Highlight
           {...defaultProps}
@@ -271,53 +268,38 @@ const Codeblock = ({
           theme={selectedTheme as PrismTheme}
         >
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <Box
-              as="pre"
+            <pre
+              className={cn(
+                "m-0 w-fit min-w-full overflow-visible py-6 ps-4",
+                hasTopBar && "pt-[2.75rem]",
+                className
+              )}
               style={style}
-              className={className}
-              pt={hasTopBar ? "2.75rem" : 6}
-              pb={6}
-              ps={4}
-              m={0}
-              overflow="visible"
-              minW="full"
-              w="fit-content"
             >
               {tokens.map((line, i) => {
                 return i === tokens.length - 1 &&
                   line[0].content === "" ? null : (
-                  <Box
+                  <div
                     key={i}
-                    display="table-row"
+                    style={{ display: "table-row" }}
                     {...getLineProps({ line, key: i })}
                   >
                     {shouldShowLineNumbers && (
-                      <Box
-                        as="span"
-                        display="table-cell"
-                        textAlign="end"
-                        pe={8}
-                        userSelect="none"
-                        opacity={0.4}
-                      >
+                      <span className="table-cell select-none pe-8 text-end opacity-40">
                         {i + 1}
-                      </Box>
+                      </span>
                     )}
-                    <Box as="span" display="table-cell">
+                    <span className="table-cell">
                       {line.map((token, key) => (
                         <span key={key} {...getTokenProps({ token, key })} />
                       ))}
-                    </Box>
-                  </Box>
+                    </span>
+                  </div>
                 )
               })}
               {!fromHomepage && (
                 <Flex
-                  className={className}
-                  justify="flex-end"
-                  position="absolute"
-                  top={3}
-                  insetInlineEnd={4}
+                  className={cn("absolute end-4 top-3 justify-end", className)}
                 >
                   {allowCollapse &&
                     totalLines - 1 > LINES_BEFORE_COLLAPSABLE && (
@@ -349,11 +331,11 @@ const Codeblock = ({
                   )}
                 </Flex>
               )}
-            </Box>
+            </pre>
           )}
         </Highlight>
-      </Box>
-    </Box>
+      </div>
+    </div>
   )
 }