components RowCustom & SongRow + artist banner

2023-06-21 08:21:34 +02:00
parent 399c7d0d9e
commit e378465126
4 changed files with 144 additions and 23 deletions
@@ -0,0 +1,69 @@
+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}
+				/>
+				<HStack
+					style={{
+						display: "flex",
+						flexShrink: 1,
+						flexGrow: 1,
+						alignItems: "center",
+						justifyContent: "flex-start",
+					}}
+					space={6}
+				>
+					<Text
+						style={{
+							flexShrink: 1,
+						}}
+						isTruncated
+						pl={10}
+						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"
+					onPress={onPress}
+				/>
+			</HStack>
+		</RowCustom>
+	);
+};
+
+export default SongRow;