WIP: display drawer on mobile when clicking on track info

components/Track/TrackActions.tsx

@@ -1,11 +1,34 @@
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+
 import LikeButton from "@/components/LikeButton";
 
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+
+import TrackActionsDrawerContent from "./TrackActionsDrawerContent";
 import { useTrackContext } from "./context";
 
 const TrackActions = () => {
   const { track } = useTrackContext();
 
-  return <LikeButton trackId={track.id} />;
+  return (
+    <>
+      <div className="sm:hidden">
+        <Drawer>
+          <DrawerTrigger asChild>
+            <DotsHorizontalIcon className="h-5 w-5" />
+          </DrawerTrigger>
+
+          <DrawerContent className="bg-transparent/60 h-screen">
+            <TrackActionsDrawerContent />
+          </DrawerContent>
+        </Drawer>
+      </div>
+
+      <div className="hidden">
+        <LikeButton trackId={track.id} />
+      </div>
+    </>
+  );
 };
 
 export default TrackActions;

components/Track/TrackActionsDrawerContent.tsx

@@ -0,0 +1,74 @@
+import {
+  LibraryIcon,
+  ListPlusIcon,
+  ListStartIcon,
+  Mic2Icon,
+  RadioIcon,
+  ShareIcon,
+  UsersIcon,
+} from "lucide-react";
+
+import useTrack from "@/hooks/useTrack";
+
+import Cover from "@/components/Cover";
+
+import { useTrackContext } from "./context";
+
+function TrackActionsDrawerContent() {
+  const { track } = useTrackContext();
+  const fullTrack = useTrack(track.id);
+
+  if (!fullTrack) return null;
+
+  return (
+    <div className="flex flex-col gap-6 border">
+      <div className="flex flex-col gap-2 justify-center items-center">
+        <Cover
+          alt={`${fullTrack.name} cover`}
+          size="medium"
+          src={fullTrack.album.images[0].url}
+        />
+
+        <div>
+          <h1>{fullTrack.name}</h1>
+          <p>
+            {fullTrack.artists[0].name} - {fullTrack.album.name}
+          </p>
+        </div>
+      </div>
+
+      <ul className="flex flex-col gap-4">
+        <li className="flex gap-2">
+          <ListPlusIcon />
+          Add to a playlist
+        </li>
+        <li className="flex gap-2">
+          <ListStartIcon />
+          Add to queue
+        </li>
+        <li className="flex gap-2">
+          <ShareIcon />
+          Share
+        </li>
+        <li className="flex gap-2">
+          <RadioIcon />
+          Go to radio
+        </li>
+        <li className="flex gap-2">
+          <LibraryIcon />
+          Album
+        </li>
+        <li className="flex gap-2">
+          <Mic2Icon />
+          Artists
+        </li>
+        <li className="flex gap-2">
+          <UsersIcon />
+          Credits
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default TrackActionsDrawerContent;

package.json

@@ -15,7 +15,6 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@heroicons/react": "^2.0.18",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",