271 lines
7.6 KiB
TypeScript
271 lines
7.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { PhotoGallery } from "@/components/photo-gallery"
|
|
import { PhotoModal } from "@/components/photo-modal"
|
|
import { Navigation } from "@/components/navigation"
|
|
import { FilterBar } from "@/components/filter-bar"
|
|
import { LoadingSpinner } from "@/components/loading-spinner"
|
|
import { TimelineView } from "@/components/timeline-view"
|
|
import { AboutView } from "@/components/about-view"
|
|
import { ContactView } from "@/components/contact-view"
|
|
|
|
// Mock photo data with EXIF information
|
|
const mockPhotos = [
|
|
{
|
|
id: 1,
|
|
src: "/placeholder.svg?height=600&width=800",
|
|
title: "城市夜景",
|
|
description: "繁华都市的霓虹夜色",
|
|
category: "urban",
|
|
tags: ["夜景", "城市", "建筑"],
|
|
date: "2024-01-15",
|
|
exif: {
|
|
camera: "Canon EOS R5",
|
|
lens: "24-70mm f/2.8",
|
|
settings: "f/8, 1/60s, ISO 800",
|
|
location: "上海外滩",
|
|
},
|
|
},
|
|
{
|
|
id: 2,
|
|
src: "/placeholder.svg?height=800&width=600",
|
|
title: "自然风光",
|
|
description: "山间晨雾缭绕的美景",
|
|
category: "nature",
|
|
tags: ["风景", "山脉", "晨雾"],
|
|
date: "2024-01-20",
|
|
exif: {
|
|
camera: "Sony A7R IV",
|
|
lens: "70-200mm f/4",
|
|
settings: "f/11, 1/125s, ISO 200",
|
|
location: "黄山",
|
|
},
|
|
},
|
|
{
|
|
id: 3,
|
|
src: "/placeholder.svg?height=600&width=800",
|
|
title: "人像摄影",
|
|
description: "自然光下的人像作品",
|
|
category: "portrait",
|
|
tags: ["人像", "自然光", "情绪"],
|
|
date: "2024-02-01",
|
|
exif: {
|
|
camera: "Nikon D850",
|
|
lens: "85mm f/1.4",
|
|
settings: "f/2.8, 1/200s, ISO 400",
|
|
location: "工作室",
|
|
},
|
|
},
|
|
{
|
|
id: 4,
|
|
src: "/placeholder.svg?height=800&width=800",
|
|
title: "街头摄影",
|
|
description: "捕捉城市生活的瞬间",
|
|
category: "street",
|
|
tags: ["街头", "生活", "瞬间"],
|
|
date: "2024-02-10",
|
|
exif: {
|
|
camera: "Fujifilm X-T4",
|
|
lens: "35mm f/1.4",
|
|
settings: "f/5.6, 1/250s, ISO 800",
|
|
location: "北京胡同",
|
|
},
|
|
},
|
|
{
|
|
id: 5,
|
|
src: "/placeholder.svg?height=600&width=800",
|
|
title: "建筑摄影",
|
|
description: "现代建筑的几何美学",
|
|
category: "architecture",
|
|
tags: ["建筑", "几何", "现代"],
|
|
date: "2024-02-15",
|
|
exif: {
|
|
camera: "Canon EOS R6",
|
|
lens: "16-35mm f/2.8",
|
|
settings: "f/8, 1/100s, ISO 100",
|
|
location: "深圳",
|
|
},
|
|
},
|
|
{
|
|
id: 6,
|
|
src: "/placeholder.svg?height=800&width=600",
|
|
title: "微距摄影",
|
|
description: "花朵的细节之美",
|
|
category: "macro",
|
|
tags: ["微距", "花卉", "细节"],
|
|
date: "2024-02-20",
|
|
exif: {
|
|
camera: "Sony A7R V",
|
|
lens: "90mm f/2.8 Macro",
|
|
settings: "f/5.6, 1/160s, ISO 200",
|
|
location: "植物园",
|
|
},
|
|
},
|
|
{
|
|
id: 7,
|
|
src: "/placeholder.svg?height=600&width=800",
|
|
title: "日落风景",
|
|
description: "海边的金色黄昏",
|
|
category: "nature",
|
|
tags: ["日落", "海景", "黄昏"],
|
|
date: "2023-12-10",
|
|
exif: {
|
|
camera: "Canon EOS R5",
|
|
lens: "24-105mm f/4",
|
|
settings: "f/8, 1/125s, ISO 100",
|
|
location: "三亚海滩",
|
|
},
|
|
},
|
|
{
|
|
id: 8,
|
|
src: "/placeholder.svg?height=800&width=600",
|
|
title: "古建筑",
|
|
description: "传统建筑的韵味",
|
|
category: "architecture",
|
|
tags: ["古建筑", "传统", "文化"],
|
|
date: "2023-11-25",
|
|
exif: {
|
|
camera: "Sony A7R IV",
|
|
lens: "50mm f/1.8",
|
|
settings: "f/5.6, 1/200s, ISO 400",
|
|
location: "故宫",
|
|
},
|
|
},
|
|
]
|
|
|
|
export default function HomePage() {
|
|
const [photos, setPhotos] = useState(mockPhotos)
|
|
const [filteredPhotos, setFilteredPhotos] = useState(mockPhotos)
|
|
const [selectedPhoto, setSelectedPhoto] = useState(null)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [activeCategory, setActiveCategory] = useState("all")
|
|
const [activeTab, setActiveTab] = useState("gallery")
|
|
|
|
useEffect(() => {
|
|
// Simulate loading
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false)
|
|
}, 1500)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [])
|
|
|
|
const handleFilter = (category: string) => {
|
|
setActiveCategory(category)
|
|
if (category === "all") {
|
|
setFilteredPhotos(photos)
|
|
} else {
|
|
setFilteredPhotos(photos.filter((photo) => photo.category === category))
|
|
}
|
|
}
|
|
|
|
const handlePhotoClick = (photo: any) => {
|
|
setSelectedPhoto(photo)
|
|
}
|
|
|
|
const handleCloseModal = () => {
|
|
setSelectedPhoto(null)
|
|
}
|
|
|
|
const handlePrevPhoto = () => {
|
|
if (!selectedPhoto) return
|
|
const currentPhotos = activeTab === "gallery" ? filteredPhotos : photos
|
|
const currentIndex = currentPhotos.findIndex((p) => p.id === selectedPhoto.id)
|
|
const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentPhotos.length - 1
|
|
setSelectedPhoto(currentPhotos[prevIndex])
|
|
}
|
|
|
|
const handleNextPhoto = () => {
|
|
if (!selectedPhoto) return
|
|
const currentPhotos = activeTab === "gallery" ? filteredPhotos : photos
|
|
const currentIndex = currentPhotos.findIndex((p) => p.id === selectedPhoto.id)
|
|
const nextIndex = currentIndex < currentPhotos.length - 1 ? currentIndex + 1 : 0
|
|
setSelectedPhoto(currentPhotos[nextIndex])
|
|
}
|
|
|
|
const handleTabChange = (tab: string) => {
|
|
setActiveTab(tab)
|
|
// Reset filters when switching tabs
|
|
if (tab === "timeline") {
|
|
setActiveCategory("all")
|
|
setFilteredPhotos(photos)
|
|
}
|
|
}
|
|
|
|
const handleContactClick = () => {
|
|
setActiveTab("contact")
|
|
}
|
|
|
|
const getPageTitle = () => {
|
|
switch (activeTab) {
|
|
case "gallery":
|
|
return "摄影作品集"
|
|
case "timeline":
|
|
return "创作时间线"
|
|
case "about":
|
|
return "关于我"
|
|
case "contact":
|
|
return "联系合作"
|
|
default:
|
|
return "摄影作品集"
|
|
}
|
|
}
|
|
|
|
const getPageDescription = () => {
|
|
switch (activeTab) {
|
|
case "gallery":
|
|
return "用镜头记录世界的美好瞬间，每一张照片都是时光的诗篇"
|
|
case "timeline":
|
|
return "按时间顺序回顾摄影创作历程，见证技艺与视角的成长轨迹"
|
|
case "about":
|
|
return "分享我的摄影故事，探索光影背后的创作理念与人生感悟"
|
|
case "contact":
|
|
return "期待与您合作，共同创造独特而珍贵的视觉记忆"
|
|
default:
|
|
return "用镜头记录世界的美好瞬间，每一张照片都是时光的诗篇"
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner />
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<Navigation activeTab={activeTab} onTabChange={handleTabChange} />
|
|
|
|
<main className="container mx-auto px-4 py-8">
|
|
{(activeTab === "gallery" || activeTab === "timeline") && (
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl md:text-6xl font-light text-gray-900 mb-4">{getPageTitle()}</h1>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">{getPageDescription()}</p>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "gallery" && (
|
|
<>
|
|
<FilterBar activeCategory={activeCategory} onFilter={handleFilter} />
|
|
<PhotoGallery photos={filteredPhotos} onPhotoClick={handlePhotoClick} />
|
|
</>
|
|
)}
|
|
|
|
{activeTab === "timeline" && <TimelineView photos={photos} onPhotoClick={handlePhotoClick} />}
|
|
|
|
{activeTab === "about" && <AboutView onContactClick={handleContactClick} />}
|
|
|
|
{activeTab === "contact" && <ContactView />}
|
|
</main>
|
|
|
|
{selectedPhoto && (
|
|
<PhotoModal
|
|
photo={selectedPhoto}
|
|
onClose={handleCloseModal}
|
|
onPrev={handlePrevPhoto}
|
|
onNext={handleNextPhoto}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|