🎨 add asLink prop on CurrentTrack & href on Cover

Bakhaw · Jan 13, 2024 · 0f1762e · 0f1762e
1 parent e84981c
commit 0f1762e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 15 deletions.
diff --git a/components/Cover/index.tsx b/components/Cover/index.tsx
@@ -1,21 +1,25 @@
+import Link from "next/link";
 import Image from "next/image";
 
 import { cn } from "@/lib/utils";
 
 import CoverFallback from "../../assets/cover-fallback.svg";
 
 interface CoverProps {
-  alt: string;
   additionalCss?: string;
+  alt: string;
+  asLink?: boolean; // default false
+  href?: string;
   priority?: boolean; // default: false
   rounded?: boolean;
   size?: "full" | "small" | "medium" | "large"; // default: "medium"
   src: string | null | undefined;
 }
 
 const Cover: React.FC<CoverProps> = ({
-  alt,
   additionalCss,
+  alt,
+  href,
   priority,
   rounded,
   size = "medium",
@@ -28,7 +32,22 @@ const Cover: React.FC<CoverProps> = ({
     large: "h-[300px] w-[300px]",
   };
 
-  return (
+  return href ? (
+    <Link href={href}>
+      <Image
+        alt={alt}
+        className={cn(
+          `block object-cover z-0 ${sizes[size]}`,
+          rounded && "rounded-full",
+          additionalCss
+        )}
+        priority={priority}
+        src={src ?? CoverFallback}
+        height={640}
+        width={640}
+      />
+    </Link>
+  ) : (
     <Image
       alt={alt}
       className={cn(

diff --git a/components/Player/ClosedPlayer.tsx b/components/Player/ClosedPlayer.tsx
@@ -29,7 +29,7 @@ function ClosedPlayer() {
   return (
     <div className="flex items-center justify-between h-16 w-full px-2">
       <div className="w-full">
-        <CurrentTrack />
+        <CurrentTrack asLink />
       </div>
 
       <div className="block md:hidden">

diff --git a/components/Player/CurrentTrack.tsx b/components/Player/CurrentTrack.tsx
@@ -7,36 +7,44 @@ import ArtistLink from "@/components/ArtistLink";
 import Cover from "@/components/Cover";
 import Draggable from "@/components/Draggable";
 
-function CurrentTrack() {
+export interface CurrentTrackProps {
+  asLink?: boolean; // default false
+}
+
+const CurrentTrack: React.FC<CurrentTrackProps> = ({ asLink = false }) => {
   const currentPlaybackState = usePlayerStore((s) => s.currentPlaybackState);
   const track = useTrack(currentPlaybackState?.item?.id);
 
   if (!track) return null; // TODO skeleton
 
+  const { album, artists, id, name } = track;
+
   return (
     <div className="flex">
-      <Draggable id={`closed_player:${track.id}`}>
+      <Draggable id={`closed_player:${id}`}>
         <div className="flex flex-1 justify-start items-center gap-3 h-full pr-2 rounded-md">
-          <div className="w-[48px]">
+          <div className="w-[48px] transition-all hover:scale-105">
             <Cover
-              alt={`${track.name} cover`}
+              alt={`${name} cover`}
+              asLink={asLink}
+              href={asLink ? `/album/${album.id}` : undefined}
               size="full"
-              src={track.album.images[0].url}
+              src={album.images[0].url}
             />
           </div>
 
-          <div className="display-arrowicon max-w-[50vw] md:max-w-[30vw]">
-            <div className="font-bold flex gap-3 transition-all hover:scale-105 sm:font-normal">
-              <AlbumLink albumId={track.album.id}>{track.name}</AlbumLink>
+          <div className="display-arrowicon max-w-[50vw] md:max-w-[30vw] transition-all hover:scale-105">
+            <div className="font-bold flex gap-3 sm:font-normal">
+              <AlbumLink albumId={album.id}>{name}</AlbumLink>
             </div>
-            <div className="transition-all hover:scale-105 text-xs">
-              <ArtistLink artists={track.artists} />
+            <div className="text-xs">
+              <ArtistLink artists={artists} />
             </div>
           </div>
         </div>
       </Draggable>
     </div>
   );
-}
+};
 
 export default CurrentTrack;