From dd748bad8871e3d598cc72c91289c14ffcf24b67 Mon Sep 17 00:00:00 2001
From: Irwing Naranjo <khalisser@gmail.com>
Date: Wed, 17 Jan 2024 09:47:24 -0300
Subject: [PATCH] refactor: componentizing track

---
 src/components/Track.jsx      | 22 ++++++++++++++++++++++
 src/components/TracksList.jsx | 19 ++-----------------
 2 files changed, 24 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Track.jsx

diff --git a/src/components/Track.jsx b/src/components/Track.jsx
new file mode 100644
index 0000000..c1902de
--- /dev/null
+++ b/src/components/Track.jsx
@@ -0,0 +1,22 @@
+import Link from 'next/link'
+
+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">
+          {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>}
+        </div>
+      </dic>
+    </Link>
+  )
+}
+
+export default Track
diff --git a/src/components/TracksList.jsx b/src/components/TracksList.jsx
index b1d9f41..c66abcd 100644
--- a/src/components/TracksList.jsx
+++ b/src/components/TracksList.jsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Track from '@/components/Track'
 
 const TracksList = ({ title, badget, tracks }) => (
   <section className="gap-4 py-6">
@@ -10,22 +10,7 @@ const TracksList = ({ title, badget, tracks }) => (
       }
     </h3>
     <div className="grid grid-cols-3 gap-4 py-6">
-      {tracks.map(({ id, slug, title, excerpt, cover, date, authorAvatar, authorName }) => (
-          <Link href={`/tracks/${slug}`} key={id} className="flex flex-col group">
-            <img src={cover} alt={title} 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">
-                {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>}
-              </div>
-            </dic>
-          </Link>
-      ))}
+      {tracks.map((track) => <Track track={track} key={track.id} />)}
     </div>
   </section>
 )