Front: Home View: Use Native Base for Layout

2022-10-06 08:57:19 +01:00
parent a78d2a0196
commit 5f63e593f9
6 changed files with 1066 additions and 70 deletions
@@ -1,7 +1,5 @@
 import React from "react";
-import { View } from "react-native";
-import { Card, Text, Title } from "react-native-paper";
-
+import { Box, VStack, Text, AspectRatio, Image } from 'native-base';
 type SongCardProps = {
 	albumCover: string;
 	songTitle: string;
@@ -12,19 +10,17 @@ const SongCard = (props: SongCardProps) => {
 	const { albumCover, songTitle, artistName } = props

 	return (
-		<View style={{ flexGrow: 0, flexShrink: 1 }}>
-			<Card style={{ padding: 5, backgroundColor: '#C5C5C5', zIndex: 0 }}>
-				<Card.Cover source={{ uri: albumCover }} style={{ aspectRatio: 1, zIndex: 0 }} />
-				<Card.Content style={{ zIndex: 0 }}>
-					<Title>
-						{songTitle}
-					</Title>
-					<Text>
-						{artistName}
-					</Text>
-				</Card.Content>
-			</Card>
-		</View>
+		<Box style={{ padding: 5, backgroundColor: '#C5C5C5', flexDirection: 'column', alignContent: 'space-around' }}>
+			<Image style={{ zIndex: 0, aspectRatio: 1 }} source={{ uri: "https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg" }} alt={[props.songTitle, props.artistName].join('-')} />
+			<VStack>
+				<Text>
+					{songTitle}
+				</Text>
+				<Text>
+					{artistName}
+				</Text>
+			</VStack>
+		</Box>
 	);
 }