🎨 Now created a seprate thumnail component for playlist

anish1617 · Mar 18, 2022 · a6522d7 · a6522d7
1 parent e5acb18
commit a6522d7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/src/common/playlists/PlayList.js b/src/common/playlists/PlayList.js
@@ -1,26 +1,15 @@
 import { useSearchFilter } from "common/search/hooks/useSearchFilter";
-import { Link } from "react-router-dom";
-import './playlist.css';
+import PlayThumbnail from "./PlayThumbnail";
 
-import { BsPlayCircleFill } from "react-icons/bs";
+import './playlist.css';
 
 const PlayList = () => {
  const plays = useSearchFilter();
-
  return (
  <>
  <ol className="list-plays">
  {plays.map((play, index) => (
- <li key={play.id}>
- <Link to={play.path} state={{ id: play.id }}>
- <div className="play-title">{play.name}</div>
- <div className="play-status">
- <BsPlayCircleFill size="18px" color="var(--color-neutral-80)"/>
- <div className="default">Play now</div>
- <div className="current">Playing..</div>
- </div>
- </Link>
- </li>
+ <PlayThumbnail key={play.id} play={play} />
  ))}
  </ol>
  </>

diff --git a/src/common/playlists/PlayThumbnail.js b/src/common/playlists/PlayThumbnail.js
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+import { BsPlayCircleFill } from "react-icons/bs";
+
+const PlayThumbnail = ({ play }) => {
+ return (
+ <li key={play.id}>
+ <Link to={play.path} state={{ id: play.id }}>
+ {/*<img src={Cover} alt={play.id} />*/}
+ <div className="play-title">{play.name}</div>
+ <div className="play-status">
+ <BsPlayCircleFill size="18px" color="var(--color-neutral-80)" />
+ <div className="default">Play now</div>
+ <div className="current">Playing..</div>
+ </div>
+ </Link>
+ </li>
+ );
+};
+
+export default PlayThumbnail;