[explorer] Add link component (MystenLabs#5395)

apps/explorer/src/ui/Button.tsx

@@ -3,7 +3,7 @@
 
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import ButtonOrLink, { type ButtonOrLinkProps } from './utils/ButtonOrLink';
+import { ButtonOrLink, type ButtonOrLinkProps } from './utils/ButtonOrLink';
 
 const buttonStyles = cva(
     [

apps/explorer/src/ui/Link.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { ButtonOrLink, type ButtonOrLinkProps } from './utils/ButtonOrLink';
+
+const linkStyles = cva(
+    [
+        // TODO: Remove when CSS reset is applied.
+        'cursor-pointer no-underline bg-transparent p-0 border-none',
+    ],
+    {
+        variants: {
+            variant: {
+                text: 'text-body font-semibold text-sui-grey-75 hover:text-sui-grey-90 active:text-sui-grey-100',
+                mono: 'font-mono text-bodySmall font-medium text-sui-dark',
+            },
+            uppercase: {
+                true: 'uppercase',
+            },
+        },
+    }
+);
+
+export interface LinkProps
+    extends ButtonOrLinkProps,
+        VariantProps<typeof linkStyles> {}
+
+export function Link({ variant, ...props }: LinkProps) {
+    return <ButtonOrLink className={linkStyles({ variant })} {...props} />;
+}

apps/explorer/src/ui/stories/Link.stories.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Link, type LinkProps } from '../Link';
+
+export default {
+    component: Link,
+} as Meta;
+
+export const Text: StoryObj<LinkProps> = {
+    args: {
+        variant: 'text',
+        children: 'View more',
+    },
+};
+
+export const Mono: StoryObj<LinkProps> = {
+    args: {
+        variant: 'mono',
+        children: '0x0000000000000000000000000000000000000002',
+    },
+};

apps/explorer/src/ui/utils/ButtonOrLink.tsx

@@ -10,7 +10,7 @@ export interface ButtonOrLinkProps
         'ref'
     > {}
 
-export default forwardRef<
+export const ButtonOrLink = forwardRef<
     HTMLAnchorElement | HTMLButtonElement,
     ButtonOrLinkProps
 >(({ href, to, ...props }, ref: any) => {