From 5929e9af4cbc03678e87b9192e8fe58f602125c8 Mon Sep 17 00:00:00 2001
From: Jhonatan Jacome <jhonatanjacome07@gmail.com>
Date: Mon, 2 Dec 2024 21:02:30 -0500
Subject: [PATCH] Refactored SongItem layout for responsive design  #27

---
 .../(page)/explore/components/SongItem.tsx    | 61 ++++++++++---------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/(page)/explore/components/SongItem.tsx b/frontend/src/app/(page)/explore/components/SongItem.tsx
index ce9f2e7..351d648 100644
--- a/frontend/src/app/(page)/explore/components/SongItem.tsx
+++ b/frontend/src/app/(page)/explore/components/SongItem.tsx
@@ -1,4 +1,3 @@
-// SongItem.tsx
 import React from "react";
 import Image from "next/image";
 import { Heart } from "lucide-react";
@@ -27,16 +26,14 @@ const SongItem: React.FC<SongItemProps> = ({
     <div
       onClick={onPlay}
       className={`
-        p-4 rounded-[15px] bg-black
-        hover:bg-primary/10 transition-colors cursor-pointer
-        ${isSelected ? "border border-primary" : ""}
-        mb-3
-        h-[72px]
+        mb-2 px-4 py-3
+        transition-colors cursor-pointer
+        ${isSelected ? "border-2 border-primary bg-black" : "bg-black"}
+        rounded-xl
       `}
     >
-      <div className="flex items-center gap-4 h-full">
-        {/* Imagen de la canción */}
-        <div className="w-16 h-16 bg-black rounded-md overflow-hidden relative flex-shrink-0">
+      <div className="grid grid-cols-[48px_40px_1fr_auto] sm:grid-cols-[78px_100px_2fr_180px_100px] items-center gap-2">
+        <div className="h-12 w-12 rounded overflow-hidden relative">
           <Image
             src="/bg-4.jpg"
             alt="Album art"
@@ -45,31 +42,37 @@ const SongItem: React.FC<SongItemProps> = ({
           />
         </div>
 
-        {/* Corazón para marcar favorito */}
-        <Heart
-          className={`w-5 h-5 cursor-pointer transition-colors border-primary ${
-            isFavorite ? "fill-primary" : "text-primary"
-          }`}
-          onClick={(e) => {
-            e.stopPropagation();
-            onFavoriteToggle();
-          }}
-        />
+        <div className="flex justify-center">
+          <Heart
+            className={`w-5 h-5 cursor-pointer transition-colors
+              ${
+                isFavorite
+                  ? "text-primary fill-primary"
+                  : "text-primary/60 hover:text-primary"
+              }
+            `}
+            onClick={(e) => {
+              e.stopPropagation();
+              onFavoriteToggle();
+            }}
+          />
+        </div>
 
-        {/* Contenedor de la canción */}
-        <div className="flex flex-1 items-center justify-between h-full">
-          {/* Título de la canción */}
-          <div className="flex-1">
-            <h3 className="text-white font-bold truncate">{title}</h3>
+        <div className="min-w-0">
+          <div className="text-white text-sm sm:text-lg font-bold truncate">
+            {title}
           </div>
-
-          {/* Género */}
-          <div className="text-white text-center font-bold w-[100px]">
+          <div className="block sm:hidden text-white text-xs font-medium truncate">
             {genre}
           </div>
+        </div>
+
+        <div className="hidden sm:block text-white font-bold text-lg truncate">
+          {genre}
+        </div>
 
-          {/* Duración */}
-          <div className="text-white font-bold w-[60px]">{duration}</div>
+        <div className="text-white font-bold text-right text-sm sm:text-lg">
+          {duration}
         </div>
       </div>
     </div>