"use client"
import { useState, useMemo } from "react"
import Link from "next/link"
import { ArrowRight, TrendingUp, Eye, FileText, Video, BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"
interface Example {
id: string
title: string
description: string
category: string
views: string
}
const categories = [
{ name: "All", icon: TrendingUp },
{ name: "Research Papers", icon: FileText },
{ name: "Analyzed Videos", icon: Video },
{ name: "Books", icon: BookOpen },
]
const ITEMS_PER_PAGE = 9
export default function TrendingList({ initialExamples }: { initialExamples: Example[] }) {
const [selectedCategory, setSelectedCategory] = useState("All")
const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE)
const filteredExamples = useMemo(() => {
if (selectedCategory === "All") return initialExamples
return initialExamples.filter(ex => ex.category === selectedCategory)
}, [selectedCategory, initialExamples])
const paginatedExamples = filteredExamples.slice(0, visibleCount)
const hasMore = visibleCount < filteredExamples.length
const handleLoadMore = () => {
setVisibleCount(prev => prev + ITEMS_PER_PAGE)
}
const handleCategoryChange = (category: string) => {
setSelectedCategory(category)
setVisibleCount(ITEMS_PER_PAGE) // Reset pagination when category changes
}
return (
<>
{/* Integrated Categories */}
{categories.map((category, index) => (
))}
{/* Examples Grid */}
{paginatedExamples.map((example: Example, index) => {
const CategoryIcon = categories.find(c => c.name === example.category)?.icon || FileText;
return (
{/* Image/Preview Area */}
{/* Animated Grid Background */}
{/* Animated Nodes / Connections */}
{/* Decorative lines connecting nodes */}
{example.category}
{example.views} views
{example.title}
{example.description}
)
})}
)}
{paginatedExamples.length === 0 && (
No examples found for this category.
)}
)
}