Files
subtracks/app/components/Star.tsx
2022-03-20 09:33:15 +09:00

31 lines
978 B
TypeScript

import { useStar } from '@app/hooks/music'
import colors from '@app/styles/colors'
import React from 'react'
import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
import IconFA from 'react-native-vector-icons/FontAwesome'
import PressableOpacity from './PressableOpacity'
export const Star = React.memo<{
starred: boolean
size: number
}>(({ starred, size }) => {
return (
<IconFA name={starred ? 'star' : 'star-o'} color={starred ? colors.accent : colors.text.secondary} size={size} />
)
})
export const PressableStar = React.memo<{
id: string
type: 'album' | 'artist' | 'song'
size: number
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
}>(({ id, type, size, style }) => {
const { starred, toggleStar } = useStar(id, type)
return (
<PressableOpacity onPress={toggleStar} style={style}>
<Star size={size} starred={starred} />
</PressableOpacity>
)
})