72 lines
1.5 KiB
TypeScript
72 lines
1.5 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; |