refactor(ui): replace HeroUI Snippet with CodeSnippet component (#10319)

ui/components/users/profile/api-key-success-modal.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { Snippet } from "@heroui/snippet";
-
 import { Button } from "@/components/shadcn";
 import { Modal } from "@/components/shadcn/modal";
 import { Alert, AlertDescription } from "@/components/ui/alert/Alert";
+import { CodeSnippet } from "@/components/ui/code-snippet/code-snippet";
 
 interface ApiKeySuccessModalProps {
   isOpen: boolean;
@@ -36,18 +35,12 @@ export const ApiKeySuccessModal = ({
           <p className="text-text-neutral-primary text-sm font-medium">
             Your API Key
           </p>
-          <Snippet
-            hideSymbol
-            classNames={{
-              pre: "font-mono text-sm break-all whitespace-pre-wrap p-2 text-text-neutral-primary",
-            }}
-            tooltipProps={{
-              content: "Copy API key",
-              color: "default",
-            }}
-          >
-            {apiKey}
-          </Snippet>
+          <CodeSnippet
+            value={apiKey}
+            multiline
+            ariaLabel="Copy API key"
+            className="w-full px-3 py-2 text-sm"
+          />
         </div>
       </div>
 

ui/components/users/profile/membership-item.tsx

@@ -32,8 +32,8 @@ export const MembershipItem = ({
           setIsOpen={setIsEditOpen}
         />
       </Modal>
-      <Card variant="inner" className="min-w-[320px] p-2">
-        <div className="flex w-full items-center gap-4">
+      <Card variant="inner" className="p-2">
+        <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
           <Chip size="sm" variant="flat" color="secondary">
             {membership.attributes.role}
           </Chip>

ui/components/users/profile/revoke-api-key-modal.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Snippet } from "@heroui/snippet";
 import { Trash2Icon } from "lucide-react";
 
 import { revokeApiKey } from "@/actions/api-keys/api-keys";
@@ -10,6 +9,7 @@ import {
   AlertDescription,
   AlertTitle,
 } from "@/components/ui/alert/Alert";
+import { CodeSnippet } from "@/components/ui/code-snippet/code-snippet";
 import { ModalButtons } from "@/components/ui/custom/custom-modal-buttons";
 
 import { FALLBACK_VALUES } from "./api-keys/constants";
@@ -67,16 +67,12 @@ export const RevokeApiKeyModal = ({
         <div className="flex flex-col gap-2">
           <p>Are you sure you want to revoke this API key?</p>
 
-          <Snippet
-            hideSymbol
-            hideCopyButton={true}
-            classNames={{
-              pre: "font-mono text-sm break-all whitespace-pre-wrap",
-            }}
-          >
-            <p>{apiKey?.attributes.name || FALLBACK_VALUES.UNNAMED_KEY}</p>
-            <p className="mt-1 text-xs">Prefix: {apiKey?.attributes.prefix}</p>
-          </Snippet>
+          <CodeSnippet
+            value={`${apiKey?.attributes.name || FALLBACK_VALUES.UNNAMED_KEY}\nPrefix: ${apiKey?.attributes.prefix}`}
+            hideCopyButton
+            multiline
+            className="w-full px-3 py-2 text-sm"
+          />
         </div>
 
         {error && (

ui/components/users/profile/role-item.tsx

@@ -68,6 +68,7 @@ export const RoleItem = ({
           variant="ghost"
           size="sm"
           onClick={() => setIsExpanded(!isExpanded)}
+          className="px-0"
         >
           {isExpanded ? "Hide details" : "Show details"}
         </Button>

ui/components/users/profile/user-basic-info-card.tsx

@@ -4,13 +4,14 @@ import { Divider } from "@heroui/divider";
 
 import { ProwlerShort } from "@/components/icons";
 import { Card, CardContent } from "@/components/shadcn";
-import { DateWithTime, InfoField, SnippetChip } from "@/components/ui/entities";
+import { CodeSnippet } from "@/components/ui/code-snippet/code-snippet";
+import { DateWithTime, InfoField } from "@/components/ui/entities";
 import { UserDataWithRoles } from "@/types/users";
 
 const TenantIdCopy = ({ id }: { id: string }) => {
   return (
     <div className="flex max-w-full min-w-0 items-center gap-2 md:flex-col md:items-start md:justify-start">
-      <SnippetChip value={id} className="max-w-full" />
+      <CodeSnippet value={id} className="max-w-full" />
     </div>
   );
 };