refactor: version 2.0 (React)

packages/renderer/src/components/TracksGrid.tsx

@@ -0,0 +1,59 @@
+import ArtistInline from '@/components/ArtistsInline'
+import Skeleton from '@/components/Skeleton'
+import { resizeImage } from '@/utils/common'
+
+const TrackListGrid = ({
+  track,
+  isSkeleton = false,
+}: {
+  track: Track
+  isSkeleton: boolean
+}) => {
+  return (
+    <div
+      className={classNames(
+        'group grid w-full rounded-xl after:scale-[.98] after:rounded-xl',
+        'grid-cols-1 py-1.5 px-2'
+      )}
+    >
+      <div className="grid grid-cols-[3rem_auto] items-center">
+        {/* Cover */}
+        <div>
+          {!isSkeleton && (
+            <img
+              src={resizeImage(track.al.picUrl, 'xs')}
+              className="box-content h-9 w-9 rounded-md border border-black border-opacity-[.03]"
+            />
+          )}
+          {isSkeleton && (
+            <Skeleton className="mr-4 h-9 w-9 rounded-md border border-gray-100" />
+          )}
+        </div>
+
+        {/* Track name & Artists */}
+        <div className="flex flex-col justify-center">
+          {!isSkeleton && (
+            <div
+              v-if="!isSkeleton"
+              className="line-clamp-1 break-all text-base font-semibold"
+            >
+              {track.name}
+            </div>
+          )}
+          {isSkeleton && (
+            <Skeleton className="text-base">PLACEHOLDER12345</Skeleton>
+          )}
+
+          <div className="text-xs">
+            {!isSkeleton && <ArtistInline artists={track.ar} />}
+            {isSkeleton && (
+              <Skeleton className="w-2/3 translate-y-px">PLACE</Skeleton>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TrackListGrid