diff --git a/components/Cover/index.tsx b/components/Cover/index.tsx index 9a950f0..879dc8d 100644 --- a/components/Cover/index.tsx +++ b/components/Cover/index.tsx @@ -1,3 +1,4 @@ +import Link from "next/link"; import Image from "next/image"; import { cn } from "@/lib/utils"; @@ -5,8 +6,10 @@ 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" @@ -14,8 +17,9 @@ interface CoverProps { } const Cover: React.FC = ({ - alt, additionalCss, + alt, + href, priority, rounded, size = "medium", @@ -28,7 +32,22 @@ const Cover: React.FC = ({ large: "h-[300px] w-[300px]", }; - return ( + return href ? ( + + {alt} + + ) : ( {alt}
- +
diff --git a/components/Player/CurrentTrack.tsx b/components/Player/CurrentTrack.tsx index 4436dac..51a49dd 100644 --- 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 = ({ 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 (
- +
-
+
-
-
- {track.name} +
+
+ {name}
-
- +
+
); -} +}; export default CurrentTrack;