12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- import React from "react";
- import PlaylistsTrack from "../PlaylistsTrack/PlaylistsTrack";
- import { useNavigate } from "react-router-dom";
- import "./style.scoped.scss";
- import PlaylistIcon from "../../assets/playlist_icon_2.svg";
- import PlayIcon from "../../assets/play_icon.svg";
- import { ROUTES } from "../../utils/constants";
- import { useDispatch } from "react-redux";
- import { actionSetQueue } from "../../redux/actions/creators/audio";
- const PlaylistInfo = ({ playlist }) => {
- const navigate = useNavigate();
- const dispatch = useDispatch();
- const { _id, name, description, tracks } = playlist;
- const editClickHandler = () => {
- navigate(`${ROUTES.PLAYLISTS}/${_id}`);
- };
- const playClickHandler = () => {
- dispatch(actionSetQueue({ _id, name, tracks: tracks ?? [] }));
- };
- return (
- <div className="playlist-item">
- <div className="top">
- <div className="cover">
- <img
- className="playlist-icon"
- src={PlaylistIcon}
- alt="playlist_icon"
- />
- <img
- className="play-icon"
- src={PlayIcon}
- alt="play_icon"
- onClick={playClickHandler}
- />
- </div>
- <div className="tracks-box">
- <div className="tracks">
- {tracks?.length
- ? tracks.map((track) => (
- <PlaylistsTrack
- key={track._id}
- track={track}
- playlistId={_id}
- />
- ))
- : "0 TRACKS"}
- </div>
- <div className="button-edit" onClick={editClickHandler}>
- EDIT
- </div>
- </div>
- </div>
- <div className="info">
- <p className="name">{name}</p>
- <p className="description">{description}</p>
- </div>
- </div>
- );
- };
- export default PlaylistInfo;
|