43 lines
996 B
TypeScript
43 lines
996 B
TypeScript
import { Flex, Text } from '@chakra-ui/react';
|
|
import { LuMusic2 } from 'react-icons/lu';
|
|
|
|
import { Track } from '@/back-api';
|
|
import { Covers } from '@/components/Cover';
|
|
|
|
export type DisplayTrackProps = {
|
|
track: Track;
|
|
};
|
|
export const DisplayTrack = ({ track }: DisplayTrackProps) => {
|
|
return (
|
|
<Flex direction="row" width="full" height="full">
|
|
<Covers
|
|
data={track?.covers}
|
|
size="50"
|
|
height="full"
|
|
iconEmpty={<LuMusic2 size="50" height="full" />}
|
|
/>
|
|
<Flex
|
|
direction="column"
|
|
width="full"
|
|
height="full"
|
|
paddingLeft="5px"
|
|
overflowX="hidden"
|
|
>
|
|
<Text
|
|
as="span"
|
|
align="left"
|
|
fontSize="20px"
|
|
fontWeight="bold"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
noOfLines={[1, 2]}
|
|
marginY="auto"
|
|
>
|
|
[{track.track}] {track.name}
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|