add improved play button group on list headers

2026-06-10 22:32:17 +02:00 · 2025-12-13 00:52:23 -08:00
parent eb100351a6
commit ab1176d4f6
6 changed files with 335 additions and 40 deletions
@@ -15,25 +15,26 @@ export interface DefaultPlayButtonProps extends ActionIconProps {
    size?: number | string;
 }

-export const DefaultPlayButton = ({
-    className,
-    variant = 'filled',
-    ...props
-}: DefaultPlayButtonProps) => {
-    return (
-        <ActionIcon
-            className={clsx(styles.textButton, className, {
-                [styles.unthemed]: variant !== 'filled',
-            })}
-            icon="mediaPlay"
-            iconProps={{
-                size: 'xl',
-            }}
-            variant={variant}
-            {...props}
-        />
-    );
-};
+export const DefaultPlayButton = forwardRef<HTMLButtonElement, DefaultPlayButtonProps>(
+    ({ className, variant = 'filled', ...props }, ref) => {
+        return (
+            <ActionIcon
+                ref={ref}
+                className={clsx(styles.textButton, className, {
+                    [styles.unthemed]: variant !== 'filled',
+                })}
+                icon="mediaPlay"
+                iconProps={{
+                    size: 'xl',
+                }}
+                variant={variant}
+                {...props}
+            />
+        );
+    },
+);
+
+DefaultPlayButton.displayName = 'DefaultPlayButton';

 interface TextPlayButtonProps extends ButtonProps {}