135 lines
4.8 KiB
TypeScript
135 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { X, Download } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import Image from "next/image";
|
|
import { ProductViewer } from "./ProductViewer";
|
|
import type { Product } from "@/lib/products";
|
|
|
|
interface ProductModalProps {
|
|
product: Product;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function ProductModal({ product, onClose }: ProductModalProps) {
|
|
const t = useTranslations();
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={onClose}
|
|
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.95, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
exit={{ scale: 0.95, opacity: 0 }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
|
|
>
|
|
{/* Header */}
|
|
<div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex justify-between items-center">
|
|
<h2 className="text-2xl font-bold text-gray-900">
|
|
{t(product.nameKey)}
|
|
</h2>
|
|
<motion.button
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</motion.button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
{/* 3D Viewer / Gallery */}
|
|
<div>
|
|
<ProductViewer
|
|
modelUrl={product.model3D}
|
|
images={product.images}
|
|
autoRotate={true}
|
|
/>
|
|
|
|
{/* Image Thumbnails */}
|
|
{product.images.length > 1 && (
|
|
<div className="mt-4 grid grid-cols-4 gap-2">
|
|
{product.images.map((img, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
whileHover={{ scale: 1.05 }}
|
|
className="relative h-20 rounded cursor-pointer overflow-hidden bg-gray-100"
|
|
>
|
|
<Image
|
|
src={img}
|
|
alt={`${t(product.nameKey)} ${idx + 1}`}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Details */}
|
|
<div>
|
|
<p className="text-gray-600 mb-6">
|
|
{product.longDescriptionKey
|
|
? t(product.longDescriptionKey)
|
|
: t(product.shortDescriptionKey)}
|
|
</p>
|
|
|
|
{/* Specifications */}
|
|
<div className="mb-8">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Technical Specifications
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{product.specs.map((spec, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex justify-between py-2 border-b border-gray-100"
|
|
>
|
|
<span className="text-gray-600">{spec.key}:</span>
|
|
<span className="font-semibold text-gray-900">
|
|
{spec.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="space-y-3">
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
|
|
>
|
|
{t("contact.send")}
|
|
</motion.button>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="w-full px-6 py-3 border border-blue-600 text-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<Download size={18} />
|
|
Download Datasheet
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
}
|