new web sayt

components/ProductViewer.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Suspense } from "react";
+import Image from "next/image";
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, useGLTF, Center, Environment } from "@react-three/drei";
+import { motion } from "framer-motion";
+
+interface ProductViewerProps {
+  modelUrl?: string;
+  images?: string[];
+  autoRotate?: boolean;
+}
+
+// 3D Model Component
+function Model({ modelUrl }: { modelUrl: string }) {
+  const { scene } = useGLTF(modelUrl);
+  return (
+    <Center>
+      <primitive object={scene} />
+    </Center>
+  );
+}
+
+function ModelCanvas({ modelUrl }: { modelUrl: string }) {
+  return (
+    <Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
+      <Suspense fallback={null}>
+        <Model modelUrl={modelUrl} />
+        <OrbitControls autoRotate={true} autoRotateSpeed={4} />
+        <Environment preset="studio" />
+      </Suspense>
+    </Canvas>
+  );
+}
+
+export function ProductViewer({
+  modelUrl,
+  images = [],
+  autoRotate = true,
+}: ProductViewerProps) {
+  const [primaryImage] = images;
+
+  return (
+    <div className="w-full h-full rounded-lg overflow-hidden bg-gray-100">
+      {modelUrl ? (
+        <div className="w-full h-full min-h-96">
+          <ModelCanvas modelUrl={modelUrl} />
+        </div>
+      ) : primaryImage ? (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="relative w-full h-full aspect-square"
+        >
+          <Image
+            src={primaryImage}
+            alt="Product"
+            fill
+            className="object-cover"
+          />
+        </motion.div>
+      ) : (
+        <div className="w-full h-96 flex items-center justify-center bg-gray-200">
+          <span className="text-gray-500">No preview available</span>
+        </div>
+      )}
+    </div>
+  );
+}