feat: wire up explore and profile pages

Updated explore and profile page components.

src/app/(main)/explore/page.tsx

@@ -1,97 +1,94 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect, useCallback } from "react"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Skeleton } from "@/components/ui/skeleton"
-import { Search, Eye, BarChart3, Filter, X, Loader2 } from "lucide-react"
+import { Search, Eye, Filter, X, Loader2, RefreshCw } from "lucide-react"
 import Link from "next/link"
 
-const allComparisons = [
+interface Comparison {
-  {
+  id: string
-    id: "1",
+  title: string
-    title: "React vs Vue vs Svelte",
+  summary: string
-    description: "Frontend framework comparison for modern web development",
+  slug: string
-    items: ["React", "Vue", "Svelte"],
+  tags: string[]
-    tags: ["Tech", "JavaScript"],
+  items: string[]
-    author: "Alex Johnson",
+  viewCount: number
-    overallScore: 8.5,
+  createdAt: string
-    views: 1247,
+}
-  },
-  {
-    id: "2",
-    title: "GPT-4 vs Claude vs Gemini",
-    description: "Comparing top AI language models for reasoning tasks",
-    items: ["GPT-4", "Claude 3", "Gemini Pro"],
-    tags: ["AI", "Products"],
-    author: "Sarah Chen",
-    overallScore: 8.8,
-    views: 3891,
-  },
-  {
-    id: "3",
-    title: "Notion vs Obsidian vs Roam",
-    description: "Knowledge management tools for productivity",
-    items: ["Notion", "Obsidian", "Roam Research"],
-    tags: ["Productivity", "Tools"],
-    author: "Mike Peters",
-    overallScore: 7.5,
-    views: 892,
-  },
-  {
-    id: "4",
-    title: "AWS vs GCP vs Azure",
-    description: "Cloud platform comparison for enterprise infrastructure",
-    items: ["AWS", "Google Cloud", "Microsoft Azure"],
-    tags: ["Tech", "Cloud"],
-    author: "Emma Wilson",
-    overallScore: 9.0,
-    views: 2156,
-  },
-  {
-    id: "5",
-    title: "iPhone 15 Pro vs Samsung S24 Ultra",
-    description: "Flagship smartphone comparison with camera and performance benchmarks",
-    items: ["iPhone 15 Pro", "Samsung S24 Ultra"],
-    tags: ["Products", "Mobile"],
-    author: "James Lee",
-    overallScore: 8.2,
-    views: 3421,
-  },
-  {
-    id: "6",
-    title: "Python vs Rust vs Go",
-    description: "Systems programming languages compared for performance and productivity",
-    items: ["Python", "Rust", "Go"],
-    tags: ["Tech", "Programming"],
-    author: "Anna Kim",
-    overallScore: 8.4,
-    views: 1873,
-  },
-]
 
-const categories = ["All", "Tech", "Products", "AI", "Cloud", "Productivity"]
+interface ComparisonsResponse {
+  comparisons: Comparison[]
+  total: number
+  page: number
+  limit: number
+}
 
 export default function ExplorePage() {
-  const [searchQuery, setSearchQuery] = useState("")
+  const [comparisons, setComparisons] = useState<Comparison[]>([])
-  const [selectedCategory, setSelectedCategory] = useState("All")
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
   const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [selectedCategory, setSelectedCategory] = useState("All")
 
-  const filteredComparisons = allComparisons.filter((comparison) => {
+  const limit = 20
-    const matchesSearch =
+
-      searchQuery === "" ||
+  const fetchComparisons = useCallback(async (pageNum: number, search: string, append = false) => {
-      comparison.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    setLoading(true)
-      comparison.items.some((item) =>
+    setError(null)
-        item.toLowerCase().includes(searchQuery.toLowerCase())
+    try {
-      )
+      const params = new URLSearchParams({
+        page: pageNum.toString(),
+        limit: limit.toString(),
+        ...(search && { search }),
+      })
+      const res = await fetch(`/api/comparisons?${params}`)
+      if (!res.ok) throw new Error("Failed to fetch comparisons")
+      const data: ComparisonsResponse = await res.json()
+      setComparisons(prev => append ? [...prev, ...data.comparisons] : data.comparisons)
+      setTotal(data.total)
+      setPage(pageNum)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong")
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery)
+      setPage(1)
+      fetchComparisons(1, searchQuery)
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [searchQuery, fetchComparisons])
+
+  useEffect(() => {
+    fetchComparisons(1, "")
+  }, [fetchComparisons])
+
+  const categories = ["All", ...Array.from(new Set(comparisons.flatMap(c => c.tags)))]
+
+  const filteredComparisons = comparisons.filter((comparison) => {
     const matchesCategory =
       selectedCategory === "All" ||
       comparison.tags.some((tag) => tag.toLowerCase() === selectedCategory.toLowerCase())
-    return matchesSearch && matchesCategory
+    return matchesCategory
   })
 
+  const loadMore = () => {
+    fetchComparisons(page + 1, debouncedSearch, true)
+  }
+
+  const hasMore = comparisons.length < total
+
   return (
     <div className="max-w-6xl mx-auto p-4 sm:p-6 space-y-6">
       <div className="space-y-4">
@@ -125,14 +122,44 @@ export default function ExplorePage() {
         </div>
       </div>
 
-      {loading ? (
+      {loading && comparisons.length === 0 ? (
-        <div className="flex items-center justify-center py-12">
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          <Loader2 className="size-8 animate-spin text-primary" />
+          {[...Array(6)].map((_, i) => (
+            <Card key={i} className="h-full">
+              <CardHeader className="pb-3">
+                <Skeleton className="h-5 w-3/4 mb-2" />
+                <Skeleton className="h-4 w-full" />
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex gap-1.5">
+                  <Skeleton className="h-5 w-12" />
+                  <Skeleton className="h-5 w-12" />
                 </div>
+                <Skeleton className="h-4 w-full" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : error ? (
+        <Card className="p-8 text-center">
+          <div className="flex flex-col items-center gap-4">
+            <div className="size-12 rounded-full bg-destructive/10 flex items-center justify-center">
+              <X className="size-6 text-destructive" />
+            </div>
+            <div>
+              <p className="font-medium">Failed to load comparisons</p>
+              <p className="text-sm text-muted-foreground">{error}</p>
+            </div>
+            <Button onClick={() => fetchComparisons(page, debouncedSearch)} className="gap-2">
+              <RefreshCw className="size-4" />
+              Retry
+            </Button>
+          </div>
+        </Card>
       ) : filteredComparisons.length > 0 ? (
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {filteredComparisons.map((comparison) => (
-            <Link key={comparison.id} href={`/compare/${comparison.id}`}>
+            <Link key={comparison.id} href={`/compare/${comparison.slug}`}>
               <Card className="h-full transition-all hover:border-primary hover:shadow-md">
                 <CardHeader className="pb-3">
                   <div className="flex items-start justify-between gap-2">
@@ -141,7 +168,7 @@ export default function ExplorePage() {
                     </CardTitle>
                   </div>
                   <CardDescription className="text-sm line-clamp-2">
-                    {comparison.description}
+                    {comparison.summary}
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-3">
@@ -153,15 +180,6 @@ export default function ExplorePage() {
                     ))}
                   </div>
 
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Avatar className="size-6">
-                      <AvatarFallback className="text-[10px]">
-                        {comparison.author.split(" ").map((n) => n[0]).join("")}
-                      </AvatarFallback>
-                    </Avatar>
-                    <span className="text-xs">{comparison.author}</span>
-                  </div>
-
                   <div className="flex items-center justify-between pt-2 border-t">
                     <span className="text-sm text-muted-foreground">
                       {comparison.items.join(" vs ")}
@@ -169,10 +187,7 @@ export default function ExplorePage() {
                     <div className="flex items-center gap-3 text-sm">
                       <span className="flex items-center gap-1 text-muted-foreground">
                         <Eye className="size-3.5" />
-                        {comparison.views.toLocaleString()}
+                        {comparison.viewCount.toLocaleString()}
-                      </span>
-                      <span className="font-semibold text-foreground bg-primary/10 px-2 py-0.5 rounded">
-                        {comparison.overallScore}/10
                       </span>
                     </div>
                   </div>
@@ -206,11 +221,19 @@ export default function ExplorePage() {
         </Card>
       )}
 
+      {loading && comparisons.length > 0 && (
+        <div className="flex justify-center py-4">
+          <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {!loading && hasMore && (
         <div className="flex justify-center">
-        <Button variant="outline" className="gap-2">
+          <Button variant="outline" onClick={loadMore} className="gap-2">
             Load More
           </Button>
         </div>
+      )}
     </div>
   )
 }

src/app/(main)/profile/page.tsx

@@ -1,52 +1,36 @@
 "use client"
 
+import { useState, useEffect, useCallback } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { BarChart3, Eye, Calendar, Plus, ArrowRight } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { BarChart3, Eye, Calendar, Plus, ArrowRight, RefreshCw, LogIn } from "lucide-react"
 import Link from "next/link"
+import { useSession } from "@/lib/auth-client"
 
-const mockUser = {
+interface Comparison {
-  name: "Alex Johnson",
+  id: string
-  email: "alex@example.com",
+  title: string
-  avatar: "/placeholder-avatar.png",
+  slug: string
+  items: string[]
+  tags: string[]
+  viewCount: number
+  overallScore: number
+  createdAt: string
 }
 
-const mockComparisons = [
+interface UserComparisonsResponse {
-  {
+  comparisons: Comparison[]
-    id: "1",
+  total: number
-    title: "React vs Vue vs Svelte",
+  page: number
-    items: ["React", "Vue", "Svelte"],
+}
-    tags: ["Tech", "JavaScript"],
-    overallScore: 8.5,
-    views: 1247,
-    createdAt: "2024-01-15",
-  },
-  {
-    id: "2",
-    title: "GPT-4 vs Claude vs Gemini",
-    items: ["GPT-4", "Claude 3", "Gemini Pro"],
-    tags: ["AI", "Products"],
-    overallScore: 8.8,
-    views: 3891,
-    createdAt: "2024-01-10",
-  },
-  {
-    id: "3",
-    title: "Notion vs Obsidian vs Roam",
-    items: ["Notion", "Obsidian", "Roam Research"],
-    tags: ["Productivity"],
-    overallScore: 7.5,
-    views: 892,
-    createdAt: "2024-01-05",
-  },
-]
 
-const stats = [
+interface UserStats {
-  { label: "Total Comparisons", value: 12, icon: BarChart3 },
+  totalComparisons: number
-  { label: "Total Views", value: "8.2K", icon: Eye },
+  totalViews: number
-]
+}
 
 export default function ProfilePage() {
   return (