chore: move code to UI

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx

@@ -4,7 +4,7 @@ import { ConfirmPopover } from "@/components/confirmation-popover";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { toast } from "@/components/ui/toaster";
 import { ArrowRight, Check, CircleInfo, Key2, Plus } from "@unkey/icons";
-import { Button, CopyButton, InfoTooltip, VisibleButton } from "@unkey/ui";
+import { Button, Code, CopyButton, InfoTooltip, VisibleButton } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { UNNAMED_KEY } from "../create-key.constants";
@@ -220,27 +220,15 @@ export const KeyCreatedSuccessDialog = ({
             </div>
             <div className="flex flex-col gap-2 items-start w-full mt-8">
               <div className="text-gray-12 text-sm font-semibold">Try It Out</div>
-              <div className="w-full px-4 py-2 bg-white dark:bg-black border rounded-xl border-grayA-5">
-                <div className="flex items-start justify-between w-full gap-4 bg-transparent">
-                  <div className="mt-2 overflow-x-auto w-full min-w-0">
-                    <pre className="ph-no-capture whitespace-pre-wrap break-all text-[11px] pr-2">
-                      {showKeyInSnippet ? snippet : snippet.replace(keyData.key, maskedKey)}
-                    </pre>
-                  </div>
-                  <div className="flex items-center justify-between gap-2 mt-1 flex-shrink-0">
-                    <VisibleButton
-                      isVisible={showKeyInSnippet}
-                      setIsVisible={(visible) => setShowKeyInSnippet(visible)}
-                      title="Key Snippet"
-                    />
-                    <Button variant="outline" size="icon" className="bg-grayA-3">
-                      <div className="flex items-center justify-center">
-                        <CopyButton value={snippet} />
-                      </div>
-                    </Button>
-                  </div>
-                </div>
-              </div>
+
+              <Code
+                visibleButton={
+                  <VisibleButton isVisible={showKeyInSnippet} setIsVisible={setShowKeyInSnippet} />
+                }
+                copyButton={<CopyButton value={snippet} />}
+              >
+                {showKeyInSnippet ? snippet : snippet.replace(keyData.key, maskedKey)}
+              </Code>
             </div>
             <div className="mt-6">
               <div className="mt-4 text-center text-gray-10 text-xs leading-6">

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/secret-key.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { CircleLock } from "@unkey/icons";
-import { Button, CopyButton, VisibleButton } from "@unkey/ui";
+import { CopyButton, VisibleButton } from "@unkey/ui";
 import { useState } from "react";
 
 const maskKey = (key: string): string => {
@@ -45,17 +45,8 @@ export const SecretKey = ({
             setIsVisible={(visible) => setIsVisible(visible)}
             title={title}
           />
-          <Button
-            variant="outline"
-            size="icon"
-            className="bg-grayA-3"
-            aria-label={`Copy ${title}`}
-            title={`Copy ${title}`}
-          >
-            <div className="flex items-center justify-center">
-              <CopyButton value={value} />
-            </div>
-          </Button>
+
+          <CopyButton value={value} title={title} />
         </div>
       </div>
     </div>

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/logs-table.tsx

@@ -324,7 +324,7 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
                                 className="pointer-events-auto"
                                 onClick={(e) => e.stopPropagation()}
                               >
-                                <CopyButton value={tag} />
+                                <CopyButton variant="ghost" value={tag} />
                               </div>
                             </div>
                           </div>
@@ -336,7 +336,7 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
                               className="pointer-events-auto flex-shrink-0"
                               onClick={(e) => e.stopPropagation()}
                             >
-                              <CopyButton value={tag} />
+                              <CopyButton variant="ghost" value={tag} />
                             </div>
                           </div>
                         )}
@@ -380,7 +380,7 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
                                   className="pointer-events-auto"
                                   onClick={(e) => e.stopPropagation()}
                                 >
-                                  <CopyButton value={tag} />
+                                  <CopyButton variant="ghost" value={tag} />
                                 </div>
                               </div>
                             </div>
@@ -392,7 +392,7 @@ export const KeyDetailsLogsTable = ({ keyspaceId, keyId, selectedLog, onLogSelec
                                 className="pointer-events-auto flex-shrink-0"
                                 onClick={(e) => e.stopPropagation()}
                               >
-                                <CopyButton value={tag} />
+                                <CopyButton variant="ghost" value={tag} />
                               </div>
                             </div>
                           )}

apps/dashboard/app/(app)/identities/[identityId]/page.tsx

@@ -2,7 +2,6 @@ import { notFound } from "next/navigation";
 
 import { PageContent } from "@/components/page-content";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Code } from "@/components/ui/code";
 import {
   Table,
   TableBody,
@@ -15,7 +14,7 @@ import { getAuth } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
-import { Badge, Button, CopyButton } from "@unkey/ui";
+import { Badge, Button, Code, CopyButton } from "@unkey/ui";
 import { ChevronRight, Minus } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";
@@ -84,7 +83,7 @@ export default async function Page(props: Props) {
           </div>
           <h2 className="text-2xl font-semibold tracking-tight">Meta</h2>
           {identity.meta ? (
-            <Code>{JSON.stringify(identity.meta, null, 2)}</Code>
+            <Code variant="legacy">{JSON.stringify(identity.meta, null, 2)}</Code>
           ) : (
             <Alert>
               <AlertTitle>No metadata</AlertTitle>

apps/dashboard/app/(app)/settings/billing/stripe/checkout/page.tsx

@@ -1,8 +1,7 @@
-import { Code } from "@/components/ui/code";
 import { getAuth } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { stripeEnv } from "@/lib/env";
-import { Empty } from "@unkey/ui";
+import { Code, Empty } from "@unkey/ui";
 import { redirect } from "next/navigation";
 import Stripe from "stripe";
 

apps/dashboard/app/(app)/settings/billing/stripe/portal/page.tsx

@@ -1,8 +1,7 @@
-import { Code } from "@/components/ui/code";
 import { getAuth } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { stripeEnv } from "@/lib/env";
-import { Empty } from "@unkey/ui";
+import { Code, Empty } from "@unkey/ui";
 import { redirect } from "next/navigation";
 import Stripe from "stripe";