feat: complete pragativeer v2 frontend and backend, docker setup, and cbt engine

src/components/CBT/PeriodicTable.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { X, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+interface PeriodicTableProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function PeriodicTable({ isOpen, onClose }: PeriodicTableProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md animate-in fade-in duration-300">
+      <div className="bg-background border border-border shadow-2xl rounded-2xl overflow-hidden animate-in zoom-in-95 duration-300 flex flex-col w-[90vw] max-w-5xl h-[85vh]">
+        <div className="p-4 border-b border-border flex justify-between items-center bg-secondary/80">
+          <h3 className="font-bold text-lg">Periodic Table of Elements</h3>
+          <div className="flex gap-2">
+             <Button variant="outline" size="sm"><ExternalLink size={14} className="mr-2"/> Open Fullscreen</Button>
+             <button onClick={onClose} className="text-muted-foreground hover:text-foreground ml-2 p-2">
+               <X size={24} />
+             </button>
+          </div>
+        </div>
+        <div className="flex-1 bg-zinc-950 p-6 flex items-center justify-center relative overflow-auto">
+          {/* We will use a high quality remote SVG/image for the periodic table reference */}
+          <div className="relative w-full h-full min-w-[800px] min-h-[500px]">
+             {/* Using a reliable wikimedia SVG for Periodic Table as a reference */}
+             <Image 
+                src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Periodic_table_large.svg"
+                alt="Periodic Table"
+                fill
+                className="object-contain"
+                unoptimized
+             />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}