Spaces:
Sleeping
Sleeping
| import { Dialog, DialogContent } from "@/components/ui/dialog"; | |
| import type { Project } from "@/types"; | |
| import { useTranslation } from "react-i18next"; | |
| import { ExternalLink, X, Code2, Tag, Star } from "lucide-react"; | |
| import { motion } from "framer-motion"; | |
| const GithubIcon = ({ className }: { className?: string }) => ( | |
| <svg className={className} viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> | |
| ); | |
| interface ProjectModalProps { | |
| project: Project | null; | |
| open: boolean; | |
| onClose: () => void; | |
| } | |
| export function ProjectModal({ project, open, onClose }: ProjectModalProps) { | |
| const { i18n } = useTranslation(); | |
| const isArabic = i18n.language === "ar"; | |
| if (!project) return null; | |
| const title = isArabic ? project.titleAr : project.titleEn; | |
| const fullDesc = isArabic ? project.fullDescAr : project.fullDescEn; | |
| const category = isArabic ? project.categoryAr : project.categoryEn; | |
| const technologies = project.technologies.split(",").map((t) => t.trim()); | |
| return ( | |
| <Dialog open={open} onOpenChange={onClose}> | |
| <DialogContent showCloseButton={false} className="!max-w-4xl !w-[calc(100%-2rem)] max-h-[90vh] overflow-y-auto !p-0 bg-white dark:bg-slate-900 !border-0 !rounded-2xl !shadow-2xl"> | |
| {/* Close Button */} | |
| <button | |
| onClick={onClose} | |
| className="absolute top-4 right-4 z-50 p-2 rounded-full bg-black/20 backdrop-blur-sm text-white hover:bg-black/40 transition-colors" | |
| > | |
| <X className="w-5 h-5" /> | |
| </button> | |
| {/* Cover Image */} | |
| {project.coverImage && ( | |
| <div className="relative h-72 md:h-80 overflow-hidden rounded-t-2xl"> | |
| <img src={project.coverImage} alt={title} className="w-full h-full object-cover" /> | |
| <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" /> | |
| <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8"> | |
| <div className="flex items-center gap-2 mb-3"> | |
| <span className="px-3 py-1 text-xs font-semibold bg-blue-600 text-white rounded-full"> | |
| {category} | |
| </span> | |
| {project.featured && ( | |
| <span className="px-3 py-1 text-xs font-semibold bg-amber-500 text-white rounded-full flex items-center gap-1"> | |
| <Star className="w-3 h-3" fill="currentColor" /> Featured | |
| </span> | |
| )} | |
| </div> | |
| <h2 className="text-2xl md:text-3xl font-bold text-white"> | |
| {title} | |
| </h2> | |
| </div> | |
| </div> | |
| )} | |
| {/* Gallery */} | |
| {project.images.length > 0 && ( | |
| <div className="px-6 pt-6"> | |
| <div className="grid grid-cols-2 md:grid-cols-3 gap-3"> | |
| {project.images.map((img) => ( | |
| <div key={img.id} className="relative h-36 md:h-44 rounded-xl overflow-hidden group"> | |
| <img src={img.url} alt="" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" /> | |
| <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" /> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {/* Content */} | |
| <div className="p-6 md:p-8 space-y-6"> | |
| {/* Description */} | |
| <div> | |
| <p className="text-slate-600 dark:text-slate-300 leading-relaxed text-base"> | |
| {fullDesc} | |
| </p> | |
| </div> | |
| {/* Technologies */} | |
| <div> | |
| <div className="flex items-center gap-2 mb-3"> | |
| <Code2 className="w-4 h-4 text-blue-600 dark:text-blue-400" /> | |
| <h4 className="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider"> | |
| {isArabic ? "التقنيات" : "Technologies"} | |
| </h4> | |
| </div> | |
| <div className="flex flex-wrap gap-2"> | |
| {technologies.map((tech, i) => ( | |
| <span | |
| key={i} | |
| className="px-4 py-1.5 text-sm font-medium bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/50 dark:to-cyan-950/50 text-blue-700 dark:text-blue-300 rounded-full border border-blue-100 dark:border-blue-900/50" | |
| > | |
| {tech} | |
| </span> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Action Buttons */} | |
| <div className="flex flex-wrap gap-3 pt-2"> | |
| {project.previewUrl && ( | |
| <a | |
| href={project.previewUrl} | |
| target="_blank" | |
| rel="noreferrer" | |
| className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-sm font-semibold transition-all shadow-lg shadow-blue-600/25 hover:shadow-blue-600/40 hover:-translate-y-0.5" | |
| > | |
| <ExternalLink className="w-4 h-4" /> | |
| {isArabic ? "معاينة" : "Live Preview"} | |
| </a> | |
| )} | |
| {project.githubUrl && ( | |
| <a | |
| href={project.githubUrl} | |
| target="_blank" | |
| rel="noreferrer" | |
| className="flex items-center gap-2 px-6 py-3 bg-slate-800 dark:bg-slate-700 hover:bg-slate-900 dark:hover:bg-slate-600 text-white rounded-xl text-sm font-semibold transition-all shadow-lg hover:-translate-y-0.5" | |
| > | |
| <GithubIcon className="w-4 h-4" /> | |
| GitHub | |
| </a> | |
| )} | |
| </div> | |
| </div> | |
| </DialogContent> | |
| </Dialog> | |
| ); | |
| } | |