t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import { Image } from "expo-image";
2import { FC } from "react";
3import { Pressable, Text, View } from "react-native";
4
5export type AlbumProps = {
6 row?: boolean;
7 size?: number;
8 artist: string;
9 title: string;
10 image: string;
11 did: string;
12 rank?: number;
13 className?: string;
14 onPress: (did: string) => void;
15};
16
17const Album: FC<AlbumProps> = (props) => {
18 const { row, size, artist, title, image, className, did, rank, onPress } =
19 props;
20 const imageSize = size ? size : 120;
21 const direction = row ? "flex-row" : "flex-col";
22 return (
23 <Pressable onPress={() => onPress(did)}>
24 <View className={`flex ${direction} justify-center ${className}`}>
25 {rank && (
26 <Text className="font-rockford-medium text-[#ffffff] text-[14px] mr-[10px]">
27 {rank}
28 </Text>
29 )}
30 <Image
31 source={{
32 uri: image,
33 }}
34 style={{
35 width: imageSize,
36 height: imageSize,
37 marginRight: row ? 15 : 0,
38 }}
39 />
40 <View
41 className={` ${row ? "flex-1 justify-center" : "mt-[12px]"} max-h-[80px]`}
42 style={{
43 width: !row ? imageSize : undefined,
44 height: !row ? imageSize : undefined,
45 }}
46 >
47 <Text
48 className="font-rockford-regular text-white"
49 numberOfLines={row ? 1 : 2}
50 ellipsizeMode="tail"
51 >
52 {title}
53 </Text>
54 <Text
55 className="font-rockford-regular text-[#A0A0A0] mt-[2px]"
56 numberOfLines={row ? 1 : 2}
57 ellipsizeMode="tail"
58 >
59 {artist}
60 </Text>
61 </View>
62 </View>
63 </Pressable>
64 );
65};
66
67export default Album;