64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { Flex, Span, Text } from '@chakra-ui/react';
|
|
import { LuDisc3 } from 'react-icons/lu';
|
|
|
|
import { Album } from '@/back-api';
|
|
import { Covers } from '@/components/Cover';
|
|
import { useCountTracksWithAlbumId } from '@/service/Track';
|
|
import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing';
|
|
|
|
export type DisplayAlbumProps = {
|
|
dataAlbum?: Album;
|
|
};
|
|
export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
|
|
const { countTracksOfAnAlbum } = useCountTracksWithAlbumId(dataAlbum?.id);
|
|
if (!dataAlbum) {
|
|
return (
|
|
<Flex direction="row" width="full" height="full">
|
|
Fail to retrieve Album Data.
|
|
</Flex>
|
|
);
|
|
}
|
|
return (
|
|
<Flex direction="row" width="full" height="full"
|
|
data-testid="display-album_flex">
|
|
<Covers
|
|
data={dataAlbum?.covers}
|
|
size={BASE_WRAP_ICON_SIZE}
|
|
flex={1}
|
|
iconEmpty={<LuDisc3 />}
|
|
/>
|
|
<Flex
|
|
direction="column"
|
|
width="150px"
|
|
//maxWidth="150px"
|
|
height="full"
|
|
paddingLeft="5px"
|
|
overflowX="hidden"
|
|
flex={1}
|
|
>
|
|
<Span
|
|
textAlign="left"
|
|
fontSize="20px"
|
|
fontWeight="bold"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
// noOfLines={[1, 2]}
|
|
>
|
|
{dataAlbum?.name}
|
|
</Span>
|
|
<Span
|
|
textAlign="left"
|
|
fontSize="15px"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
// noOfLines={1}
|
|
>
|
|
{countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'}
|
|
</Span>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|