43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { Box, Flex, Text } from "@chakra-ui/react";
|
|
import { Song } from "../types/interfaces";
|
|
import { ChangeEvent } from "react";
|
|
|
|
interface SongListProps {
|
|
songs: Song[];
|
|
onAddToPlaylist: (songId: string, playlistName: string) => void;
|
|
playlists: { name: string }[];
|
|
}
|
|
|
|
export const SongList: React.FC<SongListProps> = ({ songs, onAddToPlaylist, playlists }) => {
|
|
return (
|
|
<Flex direction="column" gap={2}>
|
|
{songs.map((song) => (
|
|
<Box key={song.id} borderWidth="1px" borderRadius="md" p={2} shadow="sm">
|
|
<Flex justify="space-between" align="center">
|
|
<Box>
|
|
<Text fontWeight="bold" fontSize="sm">{song.title}</Text>
|
|
<Text color="gray.500" fontSize="xs">{song.artist}</Text>
|
|
</Box>
|
|
<select
|
|
onChange={(e: ChangeEvent<HTMLSelectElement>) => onAddToPlaylist(song.id, e.target.value)}
|
|
value=""
|
|
style={{
|
|
padding: '0.25rem',
|
|
fontSize: '0.875rem',
|
|
borderRadius: '0.375rem',
|
|
border: '1px solid #E2E8F0'
|
|
}}
|
|
>
|
|
<option value="" disabled>Add to playlist</option>
|
|
{playlists.map((playlist) => (
|
|
<option key={playlist.name} value={playlist.name}>
|
|
{playlist.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Flex>
|
|
</Box>
|
|
))}
|
|
</Flex>
|
|
);
|
|
};
|