refactor track and tracklist components

src/components/Track.jsx

@@ -1,22 +1,38 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-const Track = ({ track: { id, slug, title, excerpt, cover, date, authorAvatar, authorName } }) => {
+const Track = ({
+  track: { id, slug, title, excerpt, cover, date, authorAvatar, authorName },
+}) => {
   return (
-    <Link href={`/tracks/${slug}`} key={id} className="flex flex-col group">
-      <img src={cover} alt={title} width="330" height="170" className='rounded-2xl group-hover:scale-105 group-hover:rotate-1 transition' />
-      <dic className='flex flex-col gap-1'>
-        <h3 className="col-span-2 text-xl mt-4 font-bold flex flex-row items-center text-gray-200 text-balance">
+    <Link href={`/tracks/${slug}`} className="group flex flex-col">
+      <img
+        src={cover}
+        alt={title}
+        width="330"
+        height="170"
+        className="rounded-2xl transition group-hover:rotate-1 group-hover:scale-105"
+      />
+      <dic className="flex flex-col gap-1">
+        <h3 className="col-span-2 mt-4 flex flex-row items-center text-balance text-xl font-bold text-gray-200">
           {title}
         </h3>
-        <p className="text-gray-400 text-balance">{excerpt}</p>
-        <div className='flex gap-2 items-center'>
-          {authorAvatar && <img className="size-6 rounded-full" src={authorAvatar} alt={authorName} />}
-          {date && <p className="text-gray-400 text-balance">{authorName}</p>}
-          {date && <p className="text-yellow-500 text-balance">Incia: {date}</p>}
+        <p className="text-balance text-gray-400">{excerpt}</p>
+        <div className="flex items-center gap-2">
+          {authorAvatar && (
+            <img
+              className="size-6 rounded-full"
+              src={authorAvatar}
+              alt={authorName}
+            />
+          )}
+          {date && <p className="text-balance text-gray-400">{authorName}</p>}
+          {date && (
+            <p className="text-balance text-yellow-500">Incia: {date}</p>
+          )}
         </div>
       </dic>
     </Link>
-  )
-}
+  );
+};
 
-export default Track
+export default Track;

src/components/TracksList.jsx

@@ -10,7 +10,7 @@ const TracksList = ({ title, badget, tracks }) => (
       }
     </h3>
     <div className="grid grid-cols-3 gap-4 py-6">
-      {tracks.map((track) => <Track track={track} key={track.id} />)}
+      {tracks.map((track) => <Track track={track} key={track.slug} />)}
     </div>
   </section>
 )