improve site and resource info cards and other small visual tweaks

src/components/CopyToClipboard.tsx

@@ -0,0 +1,52 @@
+import { Check, Copy } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+type CopyToClipboardProps = {
+    text: string;
+    isLink?: boolean;
+};
+
+const CopyToClipboard = ({ text, isLink }: CopyToClipboardProps) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+
+        setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+    };
+
+    return (
+        <div className="flex items-center">
+            {isLink ? (
+                <Link
+                    href={text}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="hover:underline mr-2"
+                >
+                    {text}
+                </Link>
+            ) : (
+                <span className="mr-2">{text}</span>
+            )}
+            <button
+                type="button"
+                className="h-6 w-6 p-0 flex items-center justify-center cursor-pointer"
+                onClick={handleCopy}
+            >
+                {!copied ? (
+                    <Copy className="h-4 w-4" />
+                ) : (
+                    <Check className="text-green-500 h-4 w-4" />
+                )}
+                <span className="sr-only">Copy text</span>
+            </button>
+        </div>
+    );
+};
+
+export default CopyToClipboard;

src/components/Credenza.tsx

@@ -90,11 +90,19 @@ const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
 
     const CredenzaContent = isDesktop ? DialogContent : SheetContent;
 
-    return (
+    return isDesktop ? (
+        <CredenzaContent
+            className={cn("overflow-y-auto max-h-screen", className)}
+            {...props}
+        >
+            {children}
+        </CredenzaContent>
+    ) : (
         <CredenzaContent
             className={cn("overflow-y-auto max-h-screen", className)}
             {...props}
             side={"bottom"}
+            onOpenAutoFocus={(e) => e.preventDefault()}
         >
             {children}
         </CredenzaContent>

src/components/InfoSection.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+export function InfoSections({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="grid grid-cols-1 md:gap-4 gap-2 md:grid-cols-[1fr_auto_1fr] md:items-start">
+            {children}
+        </div>
+    );
+}
+
+export function InfoSection({ children }: { children: React.ReactNode }) {
+    return <div className="space-y-1">{children}</div>;
+}
+
+export function InfoSectionTitle({ children }: { children: React.ReactNode }) {
+    return <div className="font-semibold">{children}</div>;
+}
+
+export function InfoSectionContent({
+    children
+}: {
+    children: React.ReactNode;
+}) {
+    return <div className="break-words">{children}</div>;
+}
+
+export function Divider() {
+    return (
+        <div className="hidden md:block border-l border-gray-300 h-auto mx-4"></div>
+    );
+}

src/components/ProfileIcon.tsx

@@ -65,7 +65,7 @@ export default function ProfileIcon() {
             <Enable2FaForm open={openEnable2fa} setOpen={setOpenEnable2fa} />
             <Disable2FaForm open={openDisable2fa} setOpen={setOpenDisable2fa} />
 
-            <div className="flex items-center gap-4 flex-grow min-w-0">
+            <div className="flex items-center md:gap-4 gap-2 flex-grow min-w-0">
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Button

src/components/ui/sheet.tsx

@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-100 data-[state=open]:duration-300",
   {
     variants: {
       side: {
@@ -80,7 +80,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col text-center sm:text-left mb-4",
       className
     )}
     {...props}