[explorer] Add PageHeader component (MystenLabs#5278)

apps/explorer/src/css-variables.d.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+// eslint-disable-next-line react/no-typos
+import 'react';
+
+declare module 'react' {
+    interface CSSProperties {
+        [key: `--${string}`]: string | number | null;
+    }
+}

apps/explorer/src/index.css

@@ -29,6 +29,7 @@
     --warning-dark: theme('colors.warning.dark');
     --issue-light: theme('colors.issue.light');
     --issue-dark: theme('colors.issue.dark');
+    --sui-steel: theme('colors.sui.steel.DEFAULT');
 }
 
 body {

apps/explorer/src/ui/Heading.tsx

@@ -11,11 +11,16 @@ const headingStyles = cva(
     ],
     {
         variants: {
+            /**
+             * The size of the heading that will be displayed.
+             * The variant is expressed in the desktop size, and will automatically adjust for mobile.
+             * Set the `fixed` property to disable responsive sizing.
+             */
             variant: {
                 heading1: 'text-heading1',
-                heading2: 'text-heading2',
+                heading2: 'md:text-heading2 text-heading3',
                 heading3: 'text-heading3',
-                heading4: 'text-heading4',
+                heading4: 'md:text-heading4 text-heading6',
                 heading5: 'text-heading5',
                 heading6: 'text-heading6',
             },
@@ -24,11 +29,26 @@ const headingStyles = cva(
                 semibold: 'font-semibold',
                 bold: 'font-bold',
             },
+            mono: {
+                true: 'font-mono',
+                false: 'font-sans',
+            },
+            /** Fix the header size, and disable responsive sizing of the heading. */
+            fixed: { true: '', false: '' },
         },
         defaultVariants: {
             variant: 'heading1',
             weight: 'semibold',
         },
+        // Use the empty `fixed` variant to force text size to a set value:
+        compoundVariants: [
+            { fixed: true, variant: 'heading1', class: '!text-heading1' },
+            { fixed: true, variant: 'heading2', class: '!text-heading2' },
+            { fixed: true, variant: 'heading3', class: '!text-heading3' },
+            { fixed: true, variant: 'heading4', class: '!text-heading4' },
+            { fixed: true, variant: 'heading5', class: '!text-heading5' },
+            { fixed: true, variant: 'heading6', class: '!text-heading6' },
+        ],
     }
 );
 

apps/explorer/src/ui/PageHeader.tsx

@@ -0,0 +1,91 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type TransactionKindName } from '@mysten/sui.js';
+import toast from 'react-hot-toast';
+
+import { Badge } from './Badge';
+import { Heading } from './Heading';
+import { ReactComponent as CopyIcon } from './icons/copy.svg';
+import { ReactComponent as ImageIcon } from './icons/image.svg';
+import { ReactComponent as SenderIcon } from './icons/sender.svg';
+import { ReactComponent as CallIcon } from './icons/transactions/call.svg';
+import { ReactComponent as ChangeEpochIcon } from './icons/transactions/changeEpoch.svg';
+import { ReactComponent as PayIcon } from './icons/transactions/pay.svg';
+import { ReactComponent as PublishIcon } from './icons/transactions/publish.svg';
+import { ReactComponent as TransferObjectIcon } from './icons/transactions/transferObject.svg';
+import { ReactComponent as TransferSuiIcon } from './icons/transactions/transferSui.svg';
+
+export type PageHeaderType =
+    | TransactionKindName
+    | 'Address'
+    | 'Object'
+    | 'Package';
+
+export interface PageHeaderProps {
+    title: string;
+    type: PageHeaderType;
+    status?: 'success' | 'failure';
+}
+
+const TYPE_TO_ICON: Record<PageHeaderType, typeof CallIcon> = {
+    Call: CallIcon,
+    ChangeEpoch: ChangeEpochIcon,
+    Pay: PayIcon,
+    Publish: PublishIcon,
+    TransferObject: TransferObjectIcon,
+    TransferSui: TransferSuiIcon,
+    Object: ImageIcon,
+    Package: CallIcon,
+    Address: () => (
+        <SenderIcon
+            style={{
+                '--icon-primary-color': 'var(--sui-steel)',
+                '--icon-secondary-color': 'white',
+            }}
+        />
+    ),
+};
+
+const STATUS_TO_TEXT = {
+    success: 'Success',
+    failure: 'Failure',
+};
+
+export function PageHeader({ title, type, status }: PageHeaderProps) {
+    const Icon = TYPE_TO_ICON[type];
+    return (
+        <div className="flex flex-col gap-3">
+            <div className="text-sui-grey-85 flex items-center gap-2">
+                <Icon className="text-sui-steel" />
+                <Heading variant="heading4" weight="semibold">
+                    {type}
+                </Heading>
+            </div>
+            <div className="flex flex-col lg:flex-row gap-2">
+                <div className="flex items-center gap-2 min-w-0">
+                    <div className="break-words min-w-0">
+                        <Heading as="h2" variant="heading2" weight="bold" mono>
+                            {title}
+                        </Heading>
+                    </div>
+                    <button
+                        onClick={() => {
+                            navigator.clipboard.writeText(title);
+                            toast.success('Copied!');
+                        }}
+                        className="bg-transparent border-none cursor-pointer p-0 m-0 text-sui-steel flex justify-center items-center"
+                    >
+                        <CopyIcon />
+                    </button>
+                </div>
+
+                {status && (
+                    <div>
+                        <Badge variant={status}>{STATUS_TO_TEXT[status]}</Badge>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}