feat: more decoration

packages/i18n/strings/en.json

@@ -123,9 +123,11 @@
     "media": "Media methods",
     "no_docs": "This method has no documentation.",
     "test": "Test",
+    "view_full": "View full types",
 
     "macros": {
-      "see": "See {path} {message}"
+      "see": "See {path} {message}",
+      "types": "Types:"
     }
   }
 }

packages/website-ue/src/components/ApiMacroType.astro

@@ -1,14 +1,18 @@
 ---
 import { existsSync } from "fs";
 import { readFile } from "fs/promises";
-import HighlightedCode from "./HighlightedCode.astro";
 import { Link } from "./Link";
+import { api } from "../core/api/dynamic";
+import HighlightedCodeBlock from "./HighlightedCodeBlock.astro";
+import { Text } from "./Text";
 
 interface Props {
   value: string;
+  locale: string;
 }
 
-const { value } = Astro.props;
+const { value, locale } = Astro.props;
+const strings = await api.strings(locale);
 
 const roots = ["src/protos", "../closed/protos"];
 
@@ -111,12 +115,16 @@ stripped = stripped.replaceAll("    ", "  ");
   }
 </script>
 
+<Text>
+  {strings.api.macros.types}
+</Text>
+
 <div class="types">
-  <HighlightedCode {lang} content={stripped} />
+  <HighlightedCodeBlock {lang} content={stripped} />
 
   <div class="overlay">
     <Link underline="always" href="#" className="view-full">
-      View full types
+      {strings.api.view_full}
     </Link>
   </div>
 </div>

packages/website-ue/src/components/Code/index.module.css

@@ -1,4 +1,16 @@
 .code {
   font: inherit;
   font-family: var(--font-family-mono);
+
+  white-space: pre;
+
+  display: inline-block;
+
+  &[data-variant="solid"] {
+    background-color: var(--gray-3);
+
+    border-radius: var(--space-3);
+
+    padding: var(--space-4);
+  }
 }

packages/website-ue/src/components/Code/index.tsx

@@ -2,8 +2,16 @@ import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
 import styles from "./index.module.css";
 
-export interface CodeProps extends ComponentProps<"code"> {}
+export interface CodeProps extends ComponentProps<"code"> {
+  variant?: "ghost" | "solid";
+}
 
-export function Code({ className, ...props }: CodeProps) {
-  return <code className={classNames(styles.code, className)} {...props} />;
+export function Code({ className, variant = "ghost", ...props }: CodeProps) {
+  return (
+    <code
+      data-variant={variant}
+      className={classNames(styles.code, className)}
+      {...props}
+    />
+  );
 }

packages/website-ue/src/components/HighlightedCodeContent.tsx

@@ -13,16 +13,5 @@ export function HighlightedCodeContent({ tree }: Props) {
       ? tree
       : toJsxRuntime(tree, { Fragment, jsx, jsxs });
 
-  return (
-    <Code
-      style={{
-        overflow: "auto",
-        padding: "var(--space-3)",
-        display: "block",
-        whiteSpace: "pre",
-        lineHeight: "1.5em",
-      }}
-      children={node}
-    />
-  );
+  return <Code variant="solid" children={node} />;
 }