feat: more decoration

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}
+    />
+  );
 }