63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import { Flex, Text } from '@chakra-ui/react';
|
|
import { LuDisc3 } from 'react-icons/lu';
|
|
|
|
import { Gender } from '@/back-api';
|
|
import { Covers } from '@/components/Cover';
|
|
import { useCountTracksOfAGender } from '@/service/Track';
|
|
|
|
export type DisplayGenderProps = {
|
|
dataGender?: Gender;
|
|
};
|
|
export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
|
|
const { countTracksOnAGender } = useCountTracksOfAGender(dataGender?.id);
|
|
if (!dataGender) {
|
|
return (
|
|
<Flex direction="row" width="full" height="full">
|
|
Fail to retrieve Gender Data.
|
|
</Flex>
|
|
);
|
|
}
|
|
return (
|
|
<Flex direction="row" width="full" height="full">
|
|
<Covers
|
|
data={dataGender?.covers}
|
|
size="100"
|
|
height="full"
|
|
iconEmpty={<LuDisc3 />}
|
|
/>
|
|
<Flex
|
|
direction="column"
|
|
width="150px"
|
|
maxWidth="150px"
|
|
height="full"
|
|
paddingLeft="5px"
|
|
overflowX="hidden"
|
|
>
|
|
<Text
|
|
as="span"
|
|
alignContent="left"
|
|
fontSize="20px"
|
|
fontWeight="bold"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
//TODO: noOfLines={[1, 2]}
|
|
>
|
|
{dataGender?.name}
|
|
</Text>
|
|
<Text
|
|
as="span"
|
|
alignContent="left"
|
|
fontSize="15px"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
//TODO: noOfLines={1}
|
|
>
|
|
{countTracksOnAGender} track{countTracksOnAGender >= 1 && 's'}
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|