建立檔案
This commit is contained in:
661
components/competition/award-detail-dialog.tsx
Normal file
661
components/competition/award-detail-dialog.tsx
Normal file
@@ -0,0 +1,661 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useCompetition } from "@/contexts/competition-context"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import {
|
||||
Target,
|
||||
Users,
|
||||
Lightbulb,
|
||||
Trophy,
|
||||
Crown,
|
||||
Award,
|
||||
Camera,
|
||||
ImageIcon,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
X,
|
||||
Star,
|
||||
MessageSquare,
|
||||
BarChart3,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
Link,
|
||||
FileText,
|
||||
} from "lucide-react"
|
||||
import type { Award as AwardType } from "@/types/competition"
|
||||
|
||||
interface AwardDetailDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
award: AwardType
|
||||
}
|
||||
|
||||
// Judge scoring data - empty for production
|
||||
const getJudgeScores = (awardId: string) => {
|
||||
return []
|
||||
}
|
||||
|
||||
// App links and reports data - empty for production
|
||||
const getAppData = (awardId: string) => {
|
||||
return {
|
||||
appUrl: "",
|
||||
demoUrl: "",
|
||||
githubUrl: "",
|
||||
reports: [],
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function AwardDetailDialog({ open, onOpenChange, award }: AwardDetailDialogProps) {
|
||||
const { competitions, judges, getTeamById, getProposalById } = useCompetition()
|
||||
const [activeTab, setActiveTab] = useState("overview")
|
||||
const [showPhotoGallery, setShowPhotoGallery] = useState(false)
|
||||
const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0)
|
||||
|
||||
const competition = competitions.find((c) => c.id === award.competitionId)
|
||||
const judgeScores = getJudgeScores(award.id)
|
||||
const appData = getAppData(award.id)
|
||||
|
||||
// Competition photos - empty for production
|
||||
const getCompetitionPhotos = () => {
|
||||
return []
|
||||
}
|
||||
|
||||
const competitionPhotos = getCompetitionPhotos()
|
||||
|
||||
const getCompetitionTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "individual":
|
||||
return <Target className="w-4 h-4" />
|
||||
case "team":
|
||||
return <Users className="w-4 h-4" />
|
||||
case "proposal":
|
||||
return <Lightbulb className="w-4 h-4" />
|
||||
default:
|
||||
return <Trophy className="w-4 h-4" />
|
||||
}
|
||||
}
|
||||
|
||||
const getCompetitionTypeText = (type: string) => {
|
||||
switch (type) {
|
||||
case "individual":
|
||||
return "個人賽"
|
||||
case "team":
|
||||
return "團隊賽"
|
||||
case "proposal":
|
||||
return "提案賽"
|
||||
default:
|
||||
return "競賽"
|
||||
}
|
||||
}
|
||||
|
||||
const getCompetitionTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case "individual":
|
||||
return "bg-blue-100 text-blue-800 border-blue-200"
|
||||
case "team":
|
||||
return "bg-green-100 text-green-800 border-green-200"
|
||||
case "proposal":
|
||||
return "bg-purple-100 text-purple-800 border-purple-200"
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800 border-gray-200"
|
||||
}
|
||||
}
|
||||
|
||||
const getFileIcon = (type: string) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case "pdf":
|
||||
return <FileText className="w-5 h-5 text-red-500" />
|
||||
case "pptx":
|
||||
case "ppt":
|
||||
return <FileText className="w-5 h-5 text-orange-500" />
|
||||
case "docx":
|
||||
case "doc":
|
||||
return <FileText className="w-5 h-5 text-blue-500" />
|
||||
default:
|
||||
return <FileText className="w-5 h-5 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
const nextPhoto = () => {
|
||||
setCurrentPhotoIndex((prev) => (prev + 1) % competitionPhotos.length)
|
||||
}
|
||||
|
||||
const prevPhoto = () => {
|
||||
setCurrentPhotoIndex((prev) => (prev - 1 + competitionPhotos.length) % competitionPhotos.length)
|
||||
}
|
||||
|
||||
const handlePreview = (report: any) => {
|
||||
// Open preview in new window
|
||||
window.open(report.previewUrl, "_blank")
|
||||
}
|
||||
|
||||
const renderAwardOverview = () => (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-6xl">{award.icon}</div>
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-2xl">{award.awardName}</CardTitle>
|
||||
<CardDescription className="text-lg">
|
||||
{award.appName || award.proposalTitle || award.teamName}
|
||||
</CardDescription>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<Badge variant="outline" className={getCompetitionTypeColor(award.competitionType)}>
|
||||
{getCompetitionTypeIcon(award.competitionType)}
|
||||
<span className="ml-1">{getCompetitionTypeText(award.competitionType)}</span>
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={`${
|
||||
award.awardType === "gold"
|
||||
? "bg-yellow-100 text-yellow-800 border-yellow-200"
|
||||
: award.awardType === "silver"
|
||||
? "bg-gray-100 text-gray-800 border-gray-200"
|
||||
: award.awardType === "bronze"
|
||||
? "bg-orange-100 text-orange-800 border-orange-200"
|
||||
: "bg-red-100 text-red-800 border-red-200"
|
||||
}`}
|
||||
>
|
||||
{award.awardName}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-3 gap-6 mb-6">
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-purple-600 mb-1">
|
||||
{award.awardType === "popular" && award.competitionType === "team"
|
||||
? `${award.score}`
|
||||
: award.awardType === "popular"
|
||||
? `${award.score}`
|
||||
: award.score}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{award.competitionType === "proposal"
|
||||
? "評審評分"
|
||||
: award.awardType === "popular"
|
||||
? award.competitionType === "team"
|
||||
? "人氣指數"
|
||||
: "收藏數"
|
||||
: "評審評分"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-blue-600 mb-1">
|
||||
{award.year}年{award.month}月
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">獲獎時間</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-green-600 mb-1">{award.creator}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{award.competitionType === "team"
|
||||
? "團隊"
|
||||
: award.competitionType === "proposal"
|
||||
? "提案團隊"
|
||||
: "創作者"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{competition && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h4 className="font-semibold text-blue-900 mb-2 flex items-center">
|
||||
<Trophy className="w-5 h-5 mr-2" />
|
||||
競賽資訊
|
||||
</h4>
|
||||
<div className="text-blue-800">
|
||||
<p className="mb-2">
|
||||
<strong>競賽名稱：</strong>
|
||||
{competition.name}
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<strong>競賽描述：</strong>
|
||||
{competition.description}
|
||||
</p>
|
||||
<p>
|
||||
<strong>競賽期間：</strong>
|
||||
{competition.startDate} ~ {competition.endDate}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* App Links Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Link className="w-5 h-5 text-green-500" />
|
||||
<span>應用連結</span>
|
||||
</CardTitle>
|
||||
<CardDescription>相關應用和資源連結</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{appData.appUrl && (
|
||||
<div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<ExternalLink className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-green-800">正式應用</p>
|
||||
<p className="text-xs text-green-600">生產環境</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-green-300 text-green-700 hover:bg-green-100 bg-transparent"
|
||||
onClick={() => window.open(appData.appUrl, "_blank")}
|
||||
>
|
||||
訪問
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{appData.demoUrl && (
|
||||
<div className="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Eye className="w-5 h-5 text-blue-600" />
|
||||
<div>
|
||||
<p className="font-medium text-blue-800">演示版本</p>
|
||||
<p className="text-xs text-blue-600">體驗環境</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-blue-300 text-blue-700 hover:bg-blue-100 bg-transparent"
|
||||
onClick={() => window.open(appData.demoUrl, "_blank")}
|
||||
>
|
||||
體驗
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{appData.githubUrl && (
|
||||
<div className="flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<FileText className="w-5 h-5 text-gray-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">源碼倉庫</p>
|
||||
<p className="text-xs text-gray-600">GitHub</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-gray-300 text-gray-700 hover:bg-gray-100 bg-transparent"
|
||||
onClick={() => window.open(appData.githubUrl, "_blank")}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Reports Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<FileText className="w-5 h-5 text-purple-500" />
|
||||
<span>相關報告</span>
|
||||
</CardTitle>
|
||||
<CardDescription>技術文檔和報告資料（僅供預覽）</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{appData.reports.map((report) => (
|
||||
<div
|
||||
key={report.id}
|
||||
className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
{getFileIcon(report.type)}
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-gray-900">{report.name}</h4>
|
||||
<p className="text-sm text-gray-600">{report.description}</p>
|
||||
<div className="flex items-center space-x-4 mt-1 text-xs text-gray-500">
|
||||
<span>大小：{report.size}</span>
|
||||
<span>上傳：{report.uploadDate}</span>
|
||||
<span className="uppercase">{report.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handlePreview(report)}
|
||||
className="text-blue-600 border-blue-300 hover:bg-blue-50"
|
||||
>
|
||||
<Eye className="w-4 h-4 mr-1" />
|
||||
預覽
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
|
||||
const renderCompetitionPhotos = () => (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Camera className="w-5 h-5 text-purple-500" />
|
||||
<span>競賽照片</span>
|
||||
</CardTitle>
|
||||
<CardDescription>競賽當天的精彩瞬間</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{competitionPhotos.map((photo, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative group cursor-pointer overflow-hidden rounded-lg border hover:shadow-lg transition-all"
|
||||
onClick={() => {
|
||||
setCurrentPhotoIndex(index)
|
||||
setShowPhotoGallery(true)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={photo.url || "/placeholder.svg"}
|
||||
alt={photo.title}
|
||||
className="w-full h-32 object-cover group-hover:scale-105 transition-transform"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all flex items-center justify-center">
|
||||
<ImageIcon className="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2">
|
||||
<p className="text-white text-xs font-medium">{photo.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setCurrentPhotoIndex(0)
|
||||
setShowPhotoGallery(true)
|
||||
}}
|
||||
>
|
||||
<Camera className="w-4 h-4 mr-2" />
|
||||
查看所有照片
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
const renderJudgePanel = () => {
|
||||
if (!competition) return null
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Crown className="w-5 h-5 text-purple-500" />
|
||||
<span>評審團</span>
|
||||
</CardTitle>
|
||||
<CardDescription>本次競賽的專業評審團隊</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{competition.judges.map((judgeId) => {
|
||||
const judge = judges.find((j) => j.id === judgeId)
|
||||
if (!judge) return null
|
||||
|
||||
return (
|
||||
<div key={judge.id} className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
|
||||
<Avatar>
|
||||
<AvatarImage src={judge.avatar || "/placeholder.svg?height=40&width=40"} />
|
||||
<AvatarFallback className="bg-purple-100 text-purple-700">{judge.name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium">{judge.name}</h4>
|
||||
<p className="text-sm text-gray-600">{judge.title}</p>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{judge.expertise.slice(0, 2).map((skill) => (
|
||||
<Badge key={skill} variant="secondary" className="text-xs">
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const renderJudgeScores = () => (
|
||||
<div className="space-y-6">
|
||||
{/* Overall Statistics */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<BarChart3 className="w-5 h-5 text-blue-500" />
|
||||
<span>評分統計</span>
|
||||
</CardTitle>
|
||||
<CardDescription>評審團整體評分概況</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="text-center p-3 bg-blue-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{(judgeScores.reduce((sum, score) => sum + score.overallScore, 0) / judgeScores.length).toFixed(1)}
|
||||
</div>
|
||||
<div className="text-sm text-blue-600">平均分數</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-green-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{Math.max(...judgeScores.map((s) => s.overallScore)).toFixed(1)}
|
||||
</div>
|
||||
<div className="text-sm text-green-600">最高分數</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-orange-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-orange-600">
|
||||
{Math.min(...judgeScores.map((s) => s.overallScore)).toFixed(1)}
|
||||
</div>
|
||||
<div className="text-sm text-orange-600">最低分數</div>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-purple-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-purple-600">{judgeScores.length}</div>
|
||||
<div className="text-sm text-purple-600">評審人數</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Individual Judge Scores */}
|
||||
{judgeScores.map((judgeScore, index) => (
|
||||
<Card key={judgeScore.judgeId}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="w-12 h-12">
|
||||
<AvatarImage src={judgeScore.judgeAvatar || "/placeholder.svg"} />
|
||||
<AvatarFallback className="bg-blue-100 text-blue-700">{judgeScore.judgeName[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg">{judgeScore.judgeName}</CardTitle>
|
||||
<CardDescription>{judgeScore.judgeTitle}</CardDescription>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Star className="w-5 h-5 text-yellow-500" />
|
||||
<span className="text-2xl font-bold text-gray-900">{judgeScore.overallScore}</span>
|
||||
<span className="text-gray-500">/5.0</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">評分時間：{judgeScore.submittedAt}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Criteria Scores */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<h4 className="font-semibold text-gray-900 flex items-center">
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
評分細項
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{judgeScore.criteria.map((criterion, criterionIndex) => (
|
||||
<div key={criterionIndex} className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium text-gray-700">{criterion.name}</span>
|
||||
<span className="text-sm text-gray-600">
|
||||
{criterion.score}/{criterion.maxScore}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={(criterion.score / criterion.maxScore) * 100} className="h-2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Judge Comment */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-semibold text-gray-900 flex items-center">
|
||||
<MessageSquare className="w-4 h-4 mr-2" />
|
||||
評審評語
|
||||
</h4>
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
<p className="text-gray-700 leading-relaxed">{judgeScore.comment}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl flex items-center space-x-2">
|
||||
<Award className="w-6 h-6 text-purple-500" />
|
||||
<span>得獎作品詳情</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{competition?.name} - {award.awardName}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-6">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="overview">獎項概覽</TabsTrigger>
|
||||
<TabsTrigger value="photos">競賽照片</TabsTrigger>
|
||||
<TabsTrigger value="judges">評審團</TabsTrigger>
|
||||
<TabsTrigger value="scores">評分詳情</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-6">
|
||||
{renderAwardOverview()}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="photos" className="space-y-6">
|
||||
{renderCompetitionPhotos()}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="judges" className="space-y-6">
|
||||
{renderJudgePanel()}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="scores" className="space-y-6">
|
||||
{renderJudgeScores()}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Photo Gallery Modal */}
|
||||
<Dialog open={showPhotoGallery} onOpenChange={setShowPhotoGallery}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] p-0">
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2 z-10 bg-black bg-opacity-50 text-white hover:bg-opacity-70"
|
||||
onClick={() => setShowPhotoGallery(false)}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
<div className="relative">
|
||||
<img
|
||||
src={competitionPhotos[currentPhotoIndex]?.url || "/placeholder.svg"}
|
||||
alt={competitionPhotos[currentPhotoIndex]?.title}
|
||||
className="w-full h-96 object-cover"
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white hover:bg-opacity-70"
|
||||
onClick={prevPhoto}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white hover:bg-opacity-70"
|
||||
onClick={nextPhoto}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
|
||||
<h3 className="text-white text-lg font-semibold">{competitionPhotos[currentPhotoIndex]?.title}</h3>
|
||||
<p className="text-white text-sm opacity-90">{competitionPhotos[currentPhotoIndex]?.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
{competitionPhotos.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`w-2 h-2 rounded-full transition-colors ${
|
||||
index === currentPhotoIndex ? "bg-purple-600" : "bg-gray-300"
|
||||
}`}
|
||||
onClick={() => setCurrentPhotoIndex(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center text-sm text-gray-500 mt-2">
|
||||
{currentPhotoIndex + 1} / {competitionPhotos.length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user