refactor(ActionsGroup): simplify

src/components/ActionsGroup/ActionsGroup.tsx

@@ -3,8 +3,8 @@
 import classNames from 'classnames';
 import React from 'react';
 import Icon from '@stremio/stremio-icons/react';
-import styles from './ActionsGroup.less';
 import { Tooltip } from 'stremio/common/Tooltips';
+import styles from './ActionsGroup.less';
 
 type Item = {
     icon: string;
@@ -23,15 +23,21 @@ type Props = {
 const ActionsGroup = ({ items, className }: Props) => {
     return (
         <div className={classNames(styles['group-container'], className)}>
-            {items.map((item, index) => (
+            {
-                <div key={index}
+                items.map((item, index) => (
-                    className={classNames(styles['icon-container'], item.className, { [styles['disabled']]: item.disabled })}
+                    <div
-                    onClick={item.onClick}
+                        key={index}
-                >
+                        className={classNames(styles['icon-container'], item.className, { [styles['disabled']]: item.disabled })}
-                    {item.label && <Tooltip label={item.label} position={'top'} />}
+                        onClick={item.onClick}
-                    <Icon name={item.icon} className={styles['icon']} />
+                    >
-                </div>
+                        {
-            ))}
+                            item.label &&
+                                <Tooltip label={item.label} position={'top'} />
+                        }
+                        <Icon name={item.icon} className={styles['icon']} />
+                    </div>
+                ))
+            }
         </div>
     );
 };

src/components/ActionsGroup/index.ts

@@ -1,6 +1,6 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2025 Smart code 203358507
 
 import ActionsGroup from './ActionsGroup';
 
-export { ActionsGroup };
+export default ActionsGroup;
 

src/components/MetaPreview/MetaPreview.js

@@ -8,7 +8,7 @@ const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { default: Button } = require('stremio/components/Button');
 const { default: Image } = require('stremio/components/Image');
-const { ActionsGroup } = require('stremio/components/ActionsGroup');
+const { default: ActionsGroup } = require('stremio/components/ActionsGroup');
 const ModalDialog = require('stremio/components/ModalDialog');
 const SharePrompt = require('stremio/components/SharePrompt');
 const CONSTANTS = require('stremio/common/CONSTANTS');

src/components/MetaPreview/Ratings/Ratings.tsx

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 import useRating from './useRating';
-import { ActionsGroup } from 'stremio/components/ActionsGroup';
+import { ActionsGroup } from 'stremio/components';
 
 type Props = {
     metaId?: string;
@@ -13,6 +13,7 @@ type Props = {
 const Ratings = ({ ratingInfo, className }: Props) => {
     const { onLiked, onLoved, liked, loved } = useRating(ratingInfo);
     const disabled = useMemo(() => ratingInfo?.type !== 'Ready', [ratingInfo]);
+
     const items = useMemo(() => [
         {
             icon: liked ? 'thumbs-up' : 'thumbs-up-outline',
@@ -24,9 +25,11 @@ const Ratings = ({ ratingInfo, className }: Props) => {
             disabled,
             onClick: onLoved,
         },
-    ], [liked, loved, disabled, onLiked, onLoved]);
+    ], [liked, loved, disabled]);
 
-    return <ActionsGroup items={items} className={className} />;
+    return (
+        <ActionsGroup items={items} className={className} />
+    );
 };
 
 export default Ratings;

src/components/index.ts

@@ -30,6 +30,7 @@ import TextInput from './TextInput';
 import Toggle from './Toggle';
 import Transition from './Transition';
 import Video from './Video';
+import ActionsGroup from './ActionsGroup';
 
 export {
     AddonDetailsModal,
@@ -65,4 +66,5 @@ export {
     Toggle,
     Transition,
     Video,
+    ActionsGroup
 };