docs: redesign tables (#8653)

* docs: redesign tables

* fixes

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)