82 lines
2.5 KiB
TypeScript
82 lines
2.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 h="full" p={4}>
|
|
<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);
|
|
|
|
return (
|
|
<Box h="full">
|
|
<VStack align="stretch" spacing={4} p={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>
|
|
);
|
|
};
|