Update Link Component

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx

@@ -97,8 +97,8 @@ const IOCellHeader = ({
                       artifactData.is_dir || false,
                     )}
                     external
-                    iconClassName="h-2.5 w-2.5"
-                    className="font-mono break-all text-[10px] text-blue-600 hover:text-blue-800 hover:underline flex gap-1"
+                    size="sm"
+                    variant="classic"
                   >
                     Link
                   </Link>

src/components/ui/link.tsx

@@ -1,42 +1,44 @@
 import { cva } from "class-variance-authority";
-import { DownloadIcon, ExternalLink } from "lucide-react";
 import { type AnchorHTMLAttributes } from "react";
 
 import { cn } from "@/lib/utils";
 
+import { Icon } from "./icon";
+import { InlineStack } from "./layout";
+
 const linkVariants = cva("items-center inline-flex cursor-pointer", {
   variants: {
     variant: {
       default: "text-primary",
       link: "text-primary hover:underline",
       disabled: "text-muted-foreground cursor-not-allowed pointer-events-none",
+      classic: "text-sky-500 hover:text-sky-600 hover:underline",
     },
     size: {
-      default: "",
+      xs: "text-xs",
       sm: "text-sm",
+      md: "text-md",
       lg: "text-lg",
     },
   },
   defaultVariants: {
     variant: "default",
-    size: "default",
+    size: "md",
   },
 });
 
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   external?: boolean;
   download?: boolean;
-  iconClassName?: string;
-  variant?: "default" | "link" | "disabled";
-  size?: "default" | "sm" | "lg";
+  variant?: "default" | "link" | "disabled" | "classic";
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
 function Link({
   external,
   children,
   className,
   download,
-  iconClassName,
   variant,
   size,
   ...props
@@ -51,9 +53,11 @@ function Link({
       {...props}
       className={cn(linkVariants({ variant, size }), className)}
     >
-      {children}
-      {external && <ExternalLink className={cn("h-4", iconClassName)} />}
-      {download && <DownloadIcon className={cn("h-4", iconClassName)} />}
+      <InlineStack gap="1" blockAlign="center">
+        {children}
+        {external && <Icon name="ExternalLink" size={size} />}
+        {download && <Icon name="Download" size={size} />}
+      </InlineStack>
     </a>
   );
 }