first commit

app/rank/page.tsx

@@ -0,0 +1,33 @@
+
+import { getRank, Subject } from '@/lib/api';
+import MovieRow from '@/components/MovieRow';
+
+export const revalidate = 3600;
+
+export default async function RankPage() {
+    let rankData: { movie: Subject[]; tv: Subject[] } = { movie: [], tv: [] };
+    try {
+        rankData = await getRank();
+    } catch (e) {
+        console.error("Failed to fetch rank:", e);
+    }
+
+    return (
+        <div className="min-h-screen pt-24 pb-16" >
+            <h1 className="text-3xl font-bold text-white mb-8 px-4 md:px-16">Top Ranked</h1>
+
+            <div className="flex flex-col gap-8">
+                {rankData.movie && rankData.movie.length > 0 && (
+                    <MovieRow title="Top Rated Movies" movies={rankData.movie} />
+                )}
+                {rankData.tv && rankData.tv.length > 0 && (
+                    <MovieRow title="Top Rated TV Shows" movies={rankData.tv} />
+                )}
+
+                {(!rankData.movie || rankData.movie.length === 0) && (!rankData.tv || rankData.tv.length === 0) && (
+                    <div className="text-gray-500 px-4 md:px-16">No ranking data available.</div>
+                )}
+            </div>
+        </div>
+    );
+}