docs: redesign tables (#8653)

* docs: redesign tables

* fixes

www/packages/docs-ui/src/components/CodeBlock/Inline/index.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import clsx from "clsx"
+import { CodeBlockProps } from "../../.."
+
+export const CodeBlockInline = ({ source }: CodeBlockProps) => {
+  return (
+    <pre
+      className={clsx(
+        "px-[6px] bg-medusa-tag-neutral-bg",
+        "w-full my-docs_0.5 rounded-docs_sm",
+        "border border-medusa-tag-neutral-border",
+        "whitespace-pre-wrap"
+      )}
+    >
+      <code className="w-full text-code-label text-medusa-tag-neutral-text">
+        {source}
+      </code>
+    </pre>
+  )
+}

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -14,6 +14,7 @@ import { HighlightProps as CollapsibleHighlightProps } from "@/hooks"
 import { CodeBlockActions, CodeBlockActionsProps } from "./Actions"
 import { CodeBlockCollapsibleButton } from "./Collapsible/Button"
 import { CodeBlockCollapsibleFade } from "./Collapsible/Fade"
+import { CodeBlockInline } from "./Inline"
 
 export type Highlight = {
   line: number
@@ -41,7 +42,7 @@ export type CodeBlockMetaFields = {
   isTerminal?: boolean
 } & CodeBlockHeaderMeta
 
-export type CodeBlockStyle = "loud" | "subtle"
+export type CodeBlockStyle = "loud" | "subtle" | "inline"
 
 export type CodeBlockProps = {
   source: string
@@ -75,6 +76,9 @@ export const CodeBlock = ({
   if (!source && typeof children === "string") {
     source = children
   }
+  if (blockStyle === "inline") {
+    return <CodeBlockInline source={source} />
+  }
 
   const { colorMode } = useColorMode()
   const [showTesting, setShowTesting] = useState(false)