119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
import { Box, VStack, Text, Divider } from "@chakra-ui/react";
|
|
import { Song } from "../types/interfaces";
|
|
|
|
interface SongDetailsProps {
|
|
song: Song | null;
|
|
}
|
|
|
|
export const SongDetails: React.FC<SongDetailsProps> = ({ song }) => {
|
|
if (!song) {
|
|
return (
|
|
<Box
|
|
w="300px"
|
|
position="sticky"
|
|
top={4}
|
|
h="calc(100vh - 2rem)"
|
|
bg="gray.800"
|
|
p={4}
|
|
borderRadius="md"
|
|
borderLeft="1px"
|
|
borderColor="gray.700"
|
|
>
|
|
<Text color="gray.500">Select a song to view details</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const details = [
|
|
{ label: "Title", value: song.title },
|
|
{ label: "Artist", value: song.artist },
|
|
{ label: "Album", value: song.album },
|
|
{ label: "Genre", value: song.genre },
|
|
{ label: "BPM", value: song.averageBpm },
|
|
{ label: "Key", value: song.tonality },
|
|
{ label: "Year", value: song.year },
|
|
{ label: "Label", value: song.label },
|
|
{ label: "Mix", value: song.mix },
|
|
{ label: "Rating", value: song.rating },
|
|
{ label: "Comments", value: song.comments },
|
|
].filter(detail => detail.value); // Only show fields that have values
|
|
|
|
return (
|
|
<Box
|
|
w="300px"
|
|
position="sticky"
|
|
top={4}
|
|
h="calc(100vh - 2rem)"
|
|
bg="gray.800"
|
|
borderRadius="md"
|
|
borderLeft="1px"
|
|
borderColor="gray.700"
|
|
display="flex"
|
|
flexDirection="column"
|
|
>
|
|
<Box p={4} flex="1" overflowY="auto" css={{
|
|
'&::-webkit-scrollbar': {
|
|
width: '4px',
|
|
},
|
|
'&::-webkit-scrollbar-track': {
|
|
background: 'transparent',
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
background: 'var(--chakra-colors-gray-600)',
|
|
borderRadius: '2px',
|
|
},
|
|
'&::-webkit-scrollbar-thumb:hover': {
|
|
background: 'var(--chakra-colors-gray-500)',
|
|
},
|
|
}}>
|
|
<VStack align="stretch" spacing={4}>
|
|
<Box>
|
|
<Text fontSize="lg" fontWeight="bold" color="white">
|
|
{song.title}
|
|
</Text>
|
|
<Text fontSize="md" color="gray.400">
|
|
{song.artist}
|
|
</Text>
|
|
</Box>
|
|
<Divider borderColor="gray.700" />
|
|
<VStack align="stretch" spacing={3}>
|
|
{details.map(({ label, value }) => (
|
|
<Box key={label}>
|
|
<Text fontSize="xs" color="gray.500" mb={1}>
|
|
{label}
|
|
</Text>
|
|
<Text fontSize="sm" color="gray.300">
|
|
{value}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</VStack>
|
|
{song.tempo && (
|
|
<>
|
|
<Divider borderColor="gray.700" />
|
|
<Box>
|
|
<Text fontSize="xs" color="gray.500" mb={2}>
|
|
Tempo Details
|
|
</Text>
|
|
<VStack align="stretch" spacing={2}>
|
|
<Box>
|
|
<Text fontSize="xs" color="gray.500">BPM</Text>
|
|
<Text fontSize="sm" color="gray.300">{song.tempo.bpm}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text fontSize="xs" color="gray.500">Beat</Text>
|
|
<Text fontSize="sm" color="gray.300">{song.tempo.battito}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text fontSize="xs" color="gray.500">Time Signature</Text>
|
|
<Text fontSize="sm" color="gray.300">{song.tempo.metro}</Text>
|
|
</Box>
|
|
</VStack>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</VStack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|