chore: upgrade ui components

web/src/components/code-viewer.tsx

@@ -1,4 +1,5 @@
 import { Button, type ButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Check, Copy } from "lucide-react";
 import { type HTMLProps, type ReactNode, useCallback, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -50,27 +51,24 @@ export function CopyButton({ value }: Readonly<CopyButtonProps>) {
 export function CodeViewer({
   code,
   header,
+  button,
   language,
   height,
   showLineNumbers = true,
   wrapLongLines = true,
-}: CodeViewerProps) {
+}: Readonly<CodeViewerProps>) {
   const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined = wrapLongLines
     ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
     : undefined;
   return (
     <div className="rounded-lg border">
-      {header && (
-        <div className="flex items-center justify-between border-b p-2">
-          {header}
+      <div className={cn("flex items-center border-b p-2 justify-end", header && "justify-between")}>
+        {header}
+        <div className="flex items-center gap-2">
+          {button}
           <CopyButton value={code} variant="ghost" size="sm" />
         </div>
-      )}
-      {!header && (
-        <div className="flex items-center justify-end border-b p-2">
-          <CopyButton value={code} variant="ghost" size="sm" />
-        </div>
-      )}
+      </div>
       <div className="relative overflow-hidden text-xs wrap-all">
         <SyntaxHighlighter
           language={language}
@@ -98,6 +96,7 @@ interface CodeViewerProps {
   code: string;
   language: string;
   header?: ReactNode;
+  button?: ReactNode;
   height?: string | number;
   showLineNumbers?: boolean;
   wrapLongLines?: boolean;