From b9bbf22f2c4a181edbef81ca8e0ce42fe220e29c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 19 Mar 2026 18:26:08 -0500
Subject: [PATCH] feat: more decoration

---
 packages/i18n/strings/en.json                    |  4 +++-
 .../website-ue/src/components/ApiMacroType.astro | 16 ++++++++++++----
 .../src/components/Code/index.module.css         | 12 ++++++++++++
 .../website-ue/src/components/Code/index.tsx     | 14 +++++++++++---
 ...htedCode.astro => HighlightedCodeBlock.astro} |  0
 .../src/components/HighlightedCodeContent.tsx    | 13 +------------
 6 files changed, 39 insertions(+), 20 deletions(-)
 rename packages/website-ue/src/components/{HighlightedCode.astro => HighlightedCodeBlock.astro} (100%)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 92c2eaf99..794d7ea49 100644
--- a/packages/i18n/strings/en.json
+++ b/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:"
     }
   }
 }
diff --git a/packages/website-ue/src/components/ApiMacroType.astro b/packages/website-ue/src/components/ApiMacroType.astro
index 1527543ef..17c6d867e 100644
--- a/packages/website-ue/src/components/ApiMacroType.astro
+++ b/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>
diff --git a/packages/website-ue/src/components/Code/index.module.css b/packages/website-ue/src/components/Code/index.module.css
index c7efb8e86..3d3e58d4b 100644
--- a/packages/website-ue/src/components/Code/index.module.css
+++ b/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);
+  }
 }
diff --git a/packages/website-ue/src/components/Code/index.tsx b/packages/website-ue/src/components/Code/index.tsx
index 932aa334d..89bbacfe2 100644
--- a/packages/website-ue/src/components/Code/index.tsx
+++ b/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}
+    />
+  );
 }
diff --git a/packages/website-ue/src/components/HighlightedCode.astro b/packages/website-ue/src/components/HighlightedCodeBlock.astro
similarity index 100%
rename from packages/website-ue/src/components/HighlightedCode.astro
rename to packages/website-ue/src/components/HighlightedCodeBlock.astro
diff --git a/packages/website-ue/src/components/HighlightedCodeContent.tsx b/packages/website-ue/src/components/HighlightedCodeContent.tsx
index e0f1dbb97..76d224f3d 100644
--- a/packages/website-ue/src/components/HighlightedCodeContent.tsx
+++ b/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} />;
 }