xref: /MusicFree/src/pages/home/components/operations/index.tsx (revision 2aa881935ca35b8fb1abc4206e0dc35149231456)
1import React from 'react';
2import {StyleSheet, View} from 'react-native';
3import rpx from '@/utils/rpx';
4import ActionButton from './ActionButton';
5import {ROUTE_PATH, useNavigate} from '@/entry/router';
6
7export default function Operations() {
8    const navigate = useNavigate();
9
10    const actionButtons = [
11        {
12            iconName: 'heart',
13            iconColor: 'red',
14            title: '我喜欢',
15            action() {
16                navigate(ROUTE_PATH.SHEET_DETAIL, {
17                    id: 'favorite',
18                });
19            },
20        },
21        {
22            iconName: 'folder-music-outline',
23            title: '本地音乐',
24            action() {
25                navigate(ROUTE_PATH.LOCAL);
26            },
27        },
28        {
29            iconName: 'download',
30            title: '下载列表',
31            action() {
32                navigate(ROUTE_PATH.DOWNLOADING);
33            },
34        },
35        {
36            iconName: 'trophy-outline',
37            title: '榜单',
38            action() {
39                navigate(ROUTE_PATH.TOP_LIST);
40            },
41        },
42    ];
43
44    return (
45        <View style={style.wrapper}>
46            {actionButtons.map(action => (
47                <ActionButton key={action.title} {...action} />
48            ))}
49        </View>
50    );
51}
52
53const style = StyleSheet.create({
54    wrapper: {
55        width: rpx(750),
56        flexDirection: 'row',
57        height: rpx(144),
58        justifyContent: 'space-between',
59        paddingHorizontal: rpx(24),
60        marginTop: rpx(20),
61        marginBottom: rpx(20),
62    },
63});
64