feat: updates

packages/web/components/TrackListHeader/Actions.tsx

@@ -0,0 +1,74 @@
+import { openContextMenu } from '@/web/states/contextMenus'
+import { cx } from '@emotion/css'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import Icon from '../Icon'
+
+const Actions = ({
+  onPlay,
+  onLike,
+  isLiked,
+  isLoading,
+}: {
+  isLiked?: boolean
+  isLoading?: boolean
+  onPlay: () => void
+  onLike?: () => void
+}) => {
+  const params = useParams()
+  const { t } = useTranslation()
+
+  return (
+    <div className='mt-11 flex items-end justify-between lg:mt-4 lg:justify-start'>
+      <div className='flex items-end'>
+        {/* Menu */}
+        <button
+          onClick={event => {
+            params?.id &&
+              openContextMenu({
+                event,
+                type: 'album',
+                dataSourceID: params.id,
+              })
+          }}
+          className={cx(
+            'mr-2.5 flex h-14 w-14 items-center justify-center rounded-full bg-white/10 transition duration-400',
+            isLoading
+              ? 'text-transparent'
+              : 'text-white/40 hover:text-white/70  hover:dark:bg-white/30'
+          )}
+        >
+          <Icon name='more' className='pointer-events-none h-7 w-7' />
+        </button>
+        {/* Like */}
+        {onLike && (
+          <button
+            onClick={() => onLike()}
+            className={cx(
+              'flex h-14 w-14 items-center justify-center rounded-full bg-white/10 transition duration-400  lg:mr-2.5',
+              isLoading
+                ? 'text-transparent'
+                : 'text-white/40 hover:text-white/70  hover:dark:bg-white/30'
+            )}
+          >
+            <Icon
+              name={isLiked ? 'heart' : 'heart-outline'}
+              className='h-7 w-7'
+            />
+          </button>
+        )}
+      </div>
+      <button
+        onClick={() => onPlay()}
+        className={cx(
+          'h-14 rounded-full px-10 text-18 font-medium',
+          isLoading ? 'bg-white/10 text-transparent' : 'bg-brand-700 text-white'
+        )}
+      >
+        {t`player.play`}
+      </button>
+    </div>
+  )
+}
+
+export default Actions