zudoku 0.3.0-dev.9 → 0.3.0-dev.90

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -1,17 +1,26 @@
-import { XIcon } from "lucide-react";
+import { EraserIcon } from "lucide-react";
 import {
   Control,
   Controller,
   useFieldArray,
   useFormContext,
 } from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
+import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
-import { PlaygroundForm } from "./Playground.js";
+import {
+  NO_IDENTITY,
+  type PlaygroundForm,
+  type QueryParam,
+} from "./Playground.js";
 
 export const QueryParams = ({
   control,
+  queryParams,
 }: {
   control: Control<PlaygroundForm>;
+  queryParams: QueryParam[];
 }) => {
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
@@ -19,71 +28,103 @@ export const QueryParams = ({
   });
   const form = useFormContext<PlaygroundForm>();
 
-  const requiredFields = form
-    .getValues(`queryParams`)
-    .map((param) => param.isRequired);
-
-  return fields.map((field, i) => (
-    <div
-      key={field.id}
-      className="px-2 grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-accent rounded overflow-hidden group"
-    >
-      <Controller
-        control={control}
-        name={`queryParams.${i}.active`}
-        render={({ field }) => (
-          <input
-            type="checkbox"
-            id={`queryParams.${i}.active`}
-            checked={field.value}
-            onChange={field.onChange}
-          />
-        )}
-      />
+  const requiredFields = queryParams.map((param) => Boolean(param.isRequired));
 
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput asChild>
-              <label
-                className="flex items-center"
-                htmlFor={`queryParams.${i}.active`}
-                title={requiredFields[i] ? "Required field" : undefined}
-              >
-                {field.value}
-                {requiredFields[i] && <sup className="text-destructive">*</sup>}
-              </label>
-            </InlineInput>
-          );
-        }}
-        name={`queryParams.${i}.name`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <InlineInput {...field} placeholder="Value" className="peer" />
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
-      <Controller
-        control={control}
-        render={({ field }) => {
-          return (
-            <button
-              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-              onClick={() => field.onChange("")}
-            >
-              <XIcon size={16} />
-            </button>
-          );
-        }}
-        name={`queryParams.${i}.value`}
-      />
+  const selectedIdentity = form.watch("identity");
+  const hasSelectedIdentity = selectedIdentity !== NO_IDENTITY;
 
-      <div className="-mx-2 col-span-full border-b border-border"></div>
+  return (
+    <div className="">
+      <table className="w-full [&_td]:border [&_td]:p-1.5 [&_td]:px-2">
+        <tbody>
+          {fields
+            .filter(
+              // TODO remove this hack for Accu or make it more generic
+              (field) => !(hasSelectedIdentity && field.name === "apikey"),
+            )
+            .map((field, i) => (
+              <tr key={field.id} className="hover:bg-accent/40">
+                <td className="text-center">
+                  <Controller
+                    control={control}
+                    name={`queryParams.${i}.active`}
+                    render={({ field }) => (
+                      <input
+                        type="checkbox"
+                        id={`queryParams.${i}.active`}
+                        checked={field.value}
+                        onChange={field.onChange}
+                      />
+                    )}
+                  />
+                </td>
+                <td>
+                  <Controller
+                    control={control}
+                    render={({ field }) => (
+                      <InlineInput asChild>
+                        <label
+                          className="flex items-center cursor-pointer"
+                          htmlFor={`queryParams.${i}.active`}
+                          title={
+                            requiredFields[i] ? "Required field" : undefined
+                          }
+                        >
+                          {field.value}
+                          {requiredFields[i] && <sup>&nbsp;*</sup>}
+                        </label>
+                      </InlineInput>
+                    )}
+                    name={`queryParams.${i}.name`}
+                  />
+                </td>
+                <td>
+                  <div className="flex justify-between items-center">
+                    <Controller
+                      control={control}
+                      render={({ field }) => (
+                        <Input
+                          {...field}
+                          onChange={(e) => {
+                            field.onChange(e.target.value);
+                            if (e.target.value.length > 0) {
+                              form.setValue(`queryParams.${i}.active`, true);
+                            }
+                          }}
+                          placeholder="Enter value"
+                          className="w-full border-0 shadow-none text-xs font-mono"
+                        />
+                      )}
+                      name={`queryParams.${i}.value`}
+                    />
+                    <Controller
+                      control={control}
+                      render={({ field }) => (
+                        <Button
+                          size="icon"
+                          type="button"
+                          variant="ghost"
+                          aria-label="Clear value"
+                          className={cn(
+                            "ms-2",
+                            field.value.length === 0
+                              ? "opacity-0 pointer-events-none"
+                              : "opacity-100",
+                          )}
+                          title="Clear value"
+                          onClick={() => field.onChange("")}
+                        >
+                          <EraserIcon size={16} />
+                        </Button>
+                      )}
+                      name={`queryParams.${i}.value`}
+                    />
+                  </div>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
     </div>
-  ));
+  );
 };

package/src/lib/plugins/openapi/playground/ResponseTab.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import { Card } from "../../../ui/Card.js";
+import { SimpleSelect } from "../SimpleSelect.js";
+
+const mimeTypeToLanguage = (mimeType: string) => {
+  const mimeTypeMapping = {
+    "application/json": "json",
+    "text/json": "json",
+    "text/html": "html",
+    "text/css": "css",
+    "text/javascript": "javascript",
+    "application/xml": "xml",
+    "application/xhtml+xml": "xhtml",
+  };
+
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[1];
+};
+
+const detectLanguage = (headers: Headers) => {
+  const contentType = headers.get("Content-Type") || "";
+  return mimeTypeToLanguage(contentType);
+};
+
+const tryParseJson = (body: string) => {
+  try {
+    return JSON.stringify(JSON.parse(body), null, 2);
+  } catch {
+    return null;
+  }
+};
+
+export const ResponseTab = ({
+  body = "",
+  headers,
+}: {
+  body?: string;
+  headers: Headers;
+}) => {
+  const detectedLanguage = detectLanguage(headers);
+  const jsonContent = tryParseJson(body);
+  const beautifiedBody = jsonContent || body;
+  const [view, setView] = useState<"formatted" | "raw">(
+    jsonContent ? "formatted" : "raw",
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Card className="shadow-none">
+        <SyntaxHighlight
+          language={
+            view === "raw" ? (jsonContent ? "plain" : detectedLanguage) : "json"
+          }
+          noBackground
+          showLanguageIndicator
+          className="overflow-x-auto p-4 text-xs"
+          code={view === "raw" ? body : beautifiedBody}
+        />
+      </Card>
+      {jsonContent && (
+        <div className="flex justify-end">
+          <SimpleSelect
+            value={view}
+            onChange={(e) => setView(e.target.value as "formatted" | "raw")}
+            options={[
+              { value: "formatted", label: "Formatted" },
+              { value: "raw", label: "Raw" },
+            ]}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -1,22 +1,19 @@
-import { PlaygroundForm } from "./Playground.js";
+import type { PlaygroundForm } from "./Playground.js";
 
 export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
-  const url = new URL(
-    host +
-      path
-        .split("/")
-        .map((v) =>
-          v.startsWith("{") && v.endsWith("}")
-            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
-                ?.value ?? v
-            : v,
-        )
-        .join("/"),
+  const filledPath = path.replace(
+    /\{(\w+)}/g,
+    (_, key) =>
+      data.pathParams.find((part) => part.name === key)?.value || `{${key}}`,
   );
 
-  data.queryParams.forEach((param) => {
-    url.searchParams.set(param.name, param.value);
-  });
+  const url = new URL(filledPath, host);
+
+  data.queryParams
+    .filter((param) => param.active)
+    .forEach((param) => {
+      url.searchParams.set(param.name, param.value);
+    });
 
   return url;
 };

package/src/lib/plugins/openapi/util/prose.ts

@@ -0,0 +1,7 @@
+import { ProseClasses } from "../../../components/Markdown.js";
+import { cn } from "../../../util/cn.js";
+
+export const SchemaProseClasses = cn(
+  ProseClasses,
+  "max-w-full prose-img:max-w-prose",
+);

package/src/lib/plugins/openapi-worker.ts

@@ -1 +1 @@
-export { createSharedWorkerClient } from "./openapi/worker/createSharedWorkerClient.js";
+export { createClient } from "./openapi/client/createWorkerClient.js";

package/src/lib/plugins/redirect/index.tsx

@@ -1,10 +1,9 @@
-import { Navigate } from "react-router-dom";
+import { redirect } from "react-router-dom";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
 export type Redirect = {
   from: string;
   to: string;
-  replace?: boolean;
 };
 
 export const redirectPlugin = (options: {
@@ -12,9 +11,9 @@ export const redirectPlugin = (options: {
 }): DevPortalPlugin => {
   return {
     getRoutes: () =>
-      options.redirects.map(({ from, to, replace }) => ({
+      options.redirects.map(({ from, to }) => ({
         path: from,
-        element: <Navigate to={to} replace={replace} />,
+        loader: () => redirect(to),
       })),
   };
 };

package/src/lib/ui/Button.tsx

@@ -1,8 +1,38 @@
 import { Slot } from "@radix-ui/react-slot";
-import { VariantProps } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../util/cn.js";
-import { buttonVariants } from "./button-variants.js";
+
+const buttonVariants = cva(
+  "not-prose inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-14 rounded-lg px-10 text-lg",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,

package/src/lib/ui/Callout.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
 import {
   AlertTriangleIcon,
   InfoIcon,
   LightbulbIcon,
   ShieldAlertIcon,
-} from "../core/icons.js";
+} from "lucide-react";
+import type { ReactNode } from "react";
 import { cn } from "../util/cn.js";
 
 const stylesMap = {
@@ -64,9 +64,9 @@ export const Callout = ({ type, children, title, className }: CalloutProps) => {
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[fit-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-transparent [&_code]:!border-none",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
         title && "items-center",
         border,
         bg,

package/src/lib/ui/Card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground shadow",
       className,
     )}
     {...props}

package/src/lib/ui/DropdownMenu.tsx

@@ -0,0 +1,199 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/lib/util/MdxComponents.tsx

@@ -1,18 +1,18 @@
 import { MDXProvider } from "@mdx-js/react";
 import type { ComponentProps } from "react";
-
 import { Link } from "react-router-dom";
 import { Heading } from "../components/Heading.js";
+import { InlineCode } from "../components/InlineCode.js";
 import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
 import { Callout } from "../ui/Callout.js";
-import { cn } from "./cn.js";
 
 export type MdxComponentsType = ComponentProps<
   typeof MDXProvider
 >["components"];
 
 export const MdxComponents = {
-  img: (props) => {
+  // @ts-expect-error Node is not in types but still gets passed
+  img: ({ node, ...props }) => {
     if (/\.(mp4|webm|mov|avi)$/.test(props.src ?? "")) {
       return <video src={props.src} controls playsInline autoPlay loop />;
     }
@@ -48,7 +48,8 @@ export const MdxComponents = {
       {children}
     </Heading>
   ),
-  a: ({ href, ...props }) =>
+  // @ts-expect-error Node is not in types but still gets passed
+  a: ({ href, node, ...props }) =>
     href && !href.startsWith("http") ? (
       <Link to={href} relative="path" {...props} />
     ) : (
@@ -74,22 +75,13 @@ export const MdxComponents = {
       return (
         <SyntaxHighlight
           language={match?.[1] ?? "markup"}
-          className="rounded-xl overflow-x-auto p-4 border border-border dark:!bg-foreground/10 dark:border-transparent"
+          className="rounded-xl overflow-x-auto p-4 border dark:!bg-foreground/10 dark:border-transparent"
           showLanguageIndicator
           code={String(children).trim()}
         />
       );
     }
 
-    return (
-      <code
-        className={cn(
-          className,
-          "font-mono border border-border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70",
-        )}
-      >
-        {children}
-      </code>
-    );
+    return <InlineCode className={className}>{children}</InlineCode>;
   },
 } satisfies MdxComponentsType;