refactor: version 2.0 (React)

packages/renderer/src/pages/Home.tsx

@@ -0,0 +1,31 @@
+import { PlaylistApiNames, fetchRecommendedPlaylists } from '@/api/playlist'
+import CoverRow from '@/components/CoverRow'
+import DailyTracksCard from '@/components/DailyTracksCard'
+import FMCard from '@/components/FMCard'
+
+export default function Home() {
+  const {
+    data: recommendedPlaylists,
+    isLoading: isLoadingRecommendedPlaylists,
+  } = useQuery(PlaylistApiNames.FETCH_RECOMMENDED_PLAYLISTS, () => {
+    return fetchRecommendedPlaylists({})
+  })
+
+  return (
+    <div>
+      <CoverRow
+        title="Good Morning"
+        playlists={recommendedPlaylists?.result.slice(0, 10) ?? []}
+        isSkeleton={isLoadingRecommendedPlaylists}
+      />
+
+      <div className="mt-10 mb-4 text-[28px] font-bold text-black dark:text-white">
+        For You
+      </div>
+      <div className="grid grid-cols-2 gap-6">
+        <DailyTracksCard />
+        <FMCard />
+      </div>
+    </div>
+  )
+}