72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
import { HStack, Image, Text } from 'native-base';
|
|
import Song, { SongWithArtist } from '../models/Song';
|
|
import RowCustom from './RowCustom';
|
|
import TextButton from './TextButton';
|
|
|
|
type SongRowProps = {
|
|
song: Song | SongWithArtist; // TODO: remove Song
|
|
onPress: () => void;
|
|
};
|
|
|
|
const SongRow = ({ song, onPress }: SongRowProps) => {
|
|
return (
|
|
<RowCustom width={'100%'}>
|
|
<HStack px={2} space={5} justifyContent={'space-between'}>
|
|
<Image
|
|
flexShrink={0}
|
|
flexGrow={0}
|
|
pl={10}
|
|
style={{ zIndex: 0, aspectRatio: 1, borderRadius: 5 }}
|
|
source={{ uri: song.cover }}
|
|
alt={song.name}
|
|
borderColor={'white'}
|
|
borderWidth={1}
|
|
/>
|
|
<HStack
|
|
style={{
|
|
display: 'flex',
|
|
flexShrink: 1,
|
|
flexGrow: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
}}
|
|
space={6}
|
|
>
|
|
<Text
|
|
style={{
|
|
flexShrink: 1,
|
|
}}
|
|
isTruncated
|
|
pl={5}
|
|
maxW={'100%'}
|
|
bold
|
|
fontSize="md"
|
|
>
|
|
{song.name}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
flexShrink: 0,
|
|
}}
|
|
fontSize={'sm'}
|
|
>
|
|
{song.artistId ?? 'artist'}
|
|
</Text>
|
|
</HStack>
|
|
<TextButton
|
|
flexShrink={0}
|
|
flexGrow={0}
|
|
translate={{ translationKey: 'playBtn' }}
|
|
colorScheme="primary"
|
|
variant={'outline'}
|
|
size="sm"
|
|
mr={5}
|
|
onPress={onPress}
|
|
/>
|
|
</HStack>
|
|
</RowCustom>
|
|
);
|
|
};
|
|
|
|
export default SongRow;
|