feat(ui-components): address feedback on pr v2

Author: Harkunwar

packages/ui-components/Common/ChangeHistory/index.module.css

@@ -43,6 +43,12 @@
     dark:bg-neutral-950;
 }
 
+.dropdownContentInner {
+  @apply max-h-80
+    w-52
+    overflow-y-auto;
+}
+
 .dropdownItem {
   @apply outline-hidden
     block
@@ -61,3 +67,17 @@
       text-white;
   }
 }
+
+.dropdownLabel {
+  @apply block
+    text-sm
+    font-medium
+    leading-tight;
+}
+
+.dropdownVersions {
+  @apply block
+    text-xs
+    leading-tight
+    opacity-75;
+}

packages/ui-components/Common/ChangeHistory/index.tsx

@@ -2,6 +2,8 @@ import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import type { FC, ComponentProps } from 'react';
 
+import type { LinkLike } from '#ui/types.js';
+
 import styles from './index.module.css';
 
 export type HistoryChange = {
@@ -13,66 +15,52 @@ export type HistoryChange = {
 type ChangeHistoryProps = ComponentProps<'div'> & {
   label: string;
   changes: Array<HistoryChange>;
+  as?: LinkLike;
 };
 
 const ChangeHistory: FC<ChangeHistoryProps> = ({
   label = 'History',
   changes = [],
   className,
+  as: As = 'a',
   'aria-label': ariaLabel = label,
   ...props
-}) => {
-  if (changes.length === 0) {
-    return null;
-  }
-  return (
-    <div
-      className={classNames('relative', 'inline-block', className)}
-      {...props}
-    >
-      <details className="group">
-        <summary className={styles.summary} role="button" aria-haspopup="menu">
-          <ClockIcon className="h-4 w-4" />
-          <span>{label}</span>
-          <ChevronDownIcon className="h-3 w-3 group-open:rotate-180 motion-safe:transition-transform" />
-        </summary>
-        <div
-          className={styles.dropdownContentWrapper}
-          role="menu"
-          aria-label={ariaLabel}
-        >
-          <div className="max-h-80 w-52 overflow-y-auto">
-            {changes.map((change, index) => {
-              const content = (
-                <>
-                  <div className="block text-sm font-medium leading-tight">
-                    {change.label}
-                  </div>
-                  <div className="block text-xs leading-tight opacity-75">
-                    {change.versions.join(', ')}
-                  </div>
-                </>
-              );
-
-              const MenuItem = change.url ? 'a' : 'div';
-              return (
-                <MenuItem
-                  key={index}
-                  className={styles.dropdownItem}
-                  role={'menuitem'}
-                  tabIndex={0}
-                  aria-label={`${change.label}:${change.versions.join(', ')}`}
-                  href={change.url}
-                >
-                  {content}
-                </MenuItem>
-              );
-            })}
-          </div>
+}) => (
+  <div className={classNames('relative', 'inline-block', className)} {...props}>
+    <details className="group">
+      <summary className={styles.summary} role="button" aria-haspopup="menu">
+        <ClockIcon className="h-4 w-4" />
+        <span>{label}</span>
+        <ChevronDownIcon className="h-3 w-3 group-open:rotate-180 motion-safe:transition-transform" />
+      </summary>
+      <div
+        className={styles.dropdownContentWrapper}
+        role="menu"
+        aria-label={ariaLabel}
+      >
+        <div className={styles.dropdownContentInner}>
+          {changes.map((change, index) => {
+            const MenuItem = change.url ? As : 'div';
+            return (
+              <MenuItem
+                key={index}
+                className={styles.dropdownItem}
+                role={'menuitem'}
+                tabIndex={0}
+                aria-label={`${change.label}: ${change.versions.join(', ')}`}
+                href={change.url}
+              >
+                <div className={styles.dropdownLabel}>{change.label}</div>
+                <div className={styles.dropdownVersions}>
+                  {change.versions.join(', ')}
+                </div>
+              </MenuItem>
+            );
+          })}
         </div>
-      </details>
-    </div>
-  );
-};
+      </div>
+    </details>
+  </div>
+);
 
 export default ChangeHistory;