81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
|
'use client'
|
|||
|
|
|
|||
|
|
import { useState } from 'react'
|
|||
|
|
import Image from 'next/image'
|
|||
|
|
import { Input } from "@/components/ui/input"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
|||
|
|
import { useConfig } from '../hooks/useConfig'
|
|||
|
|
|
|||
|
|
const ITEMS_PER_PAGE = 6
|
|||
|
|
|
|||
|
|
export default function Showcase() {
|
|||
|
|
const { config } = useConfig()
|
|||
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|||
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|||
|
|
|
|||
|
|
const filteredShowcase = config.showcase.filter(photo =>
|
|||
|
|
photo.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|||
|
|
photo.author.toLowerCase().includes(searchTerm.toLowerCase())
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const totalPages = Math.ceil(filteredShowcase.length / ITEMS_PER_PAGE)
|
|||
|
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE
|
|||
|
|
const endIndex = startIndex + ITEMS_PER_PAGE
|
|||
|
|
const currentPhotos = filteredShowcase.slice(startIndex, endIndex)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<main className="min-h-screen bg-gray-100 py-16">
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|||
|
|
<h1 className="text-3xl font-bold mb-8 text-center">摄影作品展示</h1>
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<Input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="搜索作品或作者..."
|
|||
|
|
value={searchTerm}
|
|||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|||
|
|
className="max-w-md mx-auto"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|||
|
|
{currentPhotos.map((photo, index) => (
|
|||
|
|
<div key={index} className="bg-white shadow-lg rounded-lg overflow-hidden">
|
|||
|
|
<div className="relative h-64">
|
|||
|
|
<Image
|
|||
|
|
src={photo.image}
|
|||
|
|
alt={photo.title}
|
|||
|
|
layout="fill"
|
|||
|
|
objectFit="cover"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-6">
|
|||
|
|
<h2 className="text-xl font-semibold mb-2">{photo.title}</h2>
|
|||
|
|
<p className="text-gray-600 mb-2">作者：{photo.author}</p>
|
|||
|
|
<p className="text-gray-500 text-sm">拍摄日期：{photo.date}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-8 flex justify-center items-center space-x-4">
|
|||
|
|
<Button
|
|||
|
|
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
|||
|
|
disabled={currentPage === 1}
|
|||
|
|
>
|
|||
|
|
<ChevronLeft className="h-4 w-4 mr-2" />
|
|||
|
|
上一页
|
|||
|
|
</Button>
|
|||
|
|
<span>第 {currentPage} 页，共 {totalPages} 页</span>
|
|||
|
|
<Button
|
|||
|
|
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
|||
|
|
disabled={currentPage === totalPages}
|
|||
|
|
>
|
|||
|
|
下一页
|
|||
|
|
<ChevronRight className="h-4 w-4 ml-2" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|