From 30339432ebd2ba74dfd7394cd0cf0409383f49ae Mon Sep 17 00:00:00 2001
From: Shivampal157 <shivampal60076@gmail.com>
Date: Mon, 17 Nov 2025 04:02:45 +0530
Subject: [PATCH 1/4] updated SponsorshipModel UI

---
 Frontend/setOpen(false)}                      |   0
 Frontend/setOpen(true)}                       |   0
 .../SponsorshipModal/SponsorshipModal.tsx     | 192 ++++++++++++++++++
 Frontend/src/main.tsx                         |  57 ++++--
 4 files changed, 236 insertions(+), 13 deletions(-)
 create mode 100644 Frontend/setOpen(false)}
 create mode 100644 Frontend/setOpen(true)}
 create mode 100644 Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx

diff --git a/Frontend/setOpen(false)} b/Frontend/setOpen(false)}
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/setOpen(true)} b/Frontend/setOpen(true)}
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx b/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
new file mode 100644
index 0000000..a5be6a0
--- /dev/null
+++ b/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
@@ -0,0 +1,192 @@
+import React, { useEffect, useRef, useState } from "react";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  // optional campaign data; you can extend later
+  campaign?: {
+    title?: string;
+    brand?: string;
+    overview?: string;
+  };
+};
+
+export default function SponsorshipModal({ open, onClose, campaign }: Props) {
+  const [tab, setTab] = useState<string>("overview");
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+
+  // keep focus inside modal when open
+  useEffect(() => {
+    if (!open) return;
+    const prevActive = document.activeElement as HTMLElement | null;
+    // focus the modal container
+    dialogRef.current?.focus();
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      prevActive?.focus();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const t = campaign ?? {
+    title: "Festive Promo",
+    brand: "Sparkle Co",
+    overview: "This is a sample campaign overview to test the modal.",
+  };
+
+  const tabs = [
+    { id: "overview", label: "Overview" },
+    { id: "requirements", label: "Requirements" },
+    { id: "brand", label: "Brand Info" },
+    { id: "analytics", label: "Analytics" },
+  ];
+
+  return (
+    // overlay
+    <div
+      aria-modal="true"
+      role="dialog"
+      aria-label="Sponsorship details"
+      className="fixed inset-0 z-50 flex items-center justify-center"
+    >
+      {/* backdrop */}
+      <div
+        onClick={onClose}
+        className="absolute inset-0 bg-black/50"
+        data-testid="backdrop"
+      />
+
+      {/* modal */}
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        className="relative z-10 w-full max-w-md mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden"
+        role="document"
+      >
+        {/* header */}
+        <div className="bg-gradient-to-r from-indigo-500 to-pink-400 p-4 text-white flex items-center gap-4">
+          <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-sm font-semibold">
+            {t.brand?.slice(0, 1) || "B"}
+          </div>
+          <div className="flex-1">
+            <div className="font-bold text-lg">{t.title}</div>
+            <div className="text-sm opacity-90">{t.brand}</div>
+          </div>
+          <div className="text-right text-sm">
+            <div className="text-xs">Match Score</div>
+            <div className="h-2 w-20 bg-white/30 rounded-full mt-1" />
+          </div>
+        </div>
+
+        {/* tabs */}
+        <div className="p-4">
+          <div className="flex gap-2 mb-4 flex-wrap">
+            {tabs.map((tt) => {
+              const isActive = tab === tt.id;
+              return (
+                <button
+                  key={tt.id}
+                  role="tab"
+                  aria-selected={isActive}
+                  aria-controls={`tabpanel-${tt.id}`}
+                  id={`tab-${tt.id}`}
+                  tabIndex={isActive ? 0 : -1}
+                  onClick={() => setTab(tt.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      setTab(tt.id);
+                    }
+                  }}
+                  className={`px-4 py-2 rounded-full text-sm font-medium transition-shadow focus:outline-none focus:ring-2 focus:ring-indigo-400 ${
+                    isActive
+                      ? "bg-indigo-600 text-white shadow-lg"
+                      : "bg-gray-200 text-gray-800"
+                  }`}
+                >
+                  {tt.label}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* content box */}
+          <div
+            id={`tabpanel-${tab}`}
+            role="tabpanel"
+            aria-labelledby={`tab-${tab}`}
+            className="bg-gray-50 rounded-xl p-4 shadow-sm"
+          >
+            {tab === "overview" && (
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Overview</h3>
+                <div className="text-sm text-gray-700">{t.overview}</div>
+              </div>
+            )}
+
+            {tab === "requirements" && (
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Requirements</h3>
+                <ul className="list-disc pl-5 text-sm text-gray-700">
+                  <li>Minimum reach: 50k</li>
+                  <li>Deliverable: 1 short + 1 reel</li>
+                  <li>Timeline: 7 days</li>
+                </ul>
+              </div>
+            )}
+
+            {tab === "brand" && (
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Brand Info</h3>
+                <div className="text-sm text-gray-700">
+                  {t.brand} is a sample brand used for local testing.
+                </div>
+              </div>
+            )}
+
+            {tab === "analytics" && (
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Analytics</h3>
+                <div className="text-sm text-gray-700">
+                  No analytics available in local test mode.
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* footer buttons */}
+          <div className="flex items-center justify-end gap-3 mt-4">
+            <button
+              onClick={() => {
+                // example contact behaviour: open mailto (safe)
+                const mailto = `mailto:brand@example.com?subject=Interested in ${encodeURIComponent(
+                  t.title || "campaign"
+                )}`;
+                const win = window.open(mailto, "_blank");
+                if (!win) window.location.href = mailto;
+              }}
+              className="px-4 py-2 bg-indigo-600 text-white rounded-lg shadow"
+            >
+              Contact
+            </button>
+
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-white border rounded-lg"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/Frontend/src/main.tsx b/Frontend/src/main.tsx
index 18b97e0..42dce18 100644
--- a/Frontend/src/main.tsx
+++ b/Frontend/src/main.tsx
@@ -1,14 +1,45 @@
-import { StrictMode } from "react";
+// src/main.tsx — temporary test entry
+import React from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
-import { Provider } from "react-redux";
-import App from "./App.tsx";
-import store from "./redux/store.ts";
-
-createRoot(document.getElementById("root")!).render(
-  // <StrictMode>
-  <Provider store={store}>
-    <App />
-  </Provider>
-  // </StrictMode>,
-);
+import "./index.css"; // agar file nahi hai to hata sakte ho (nahin to leave it)
+
+import SponsorshipModal from "./components/SponsorshipModal/SponsorshipModal";
+
+function TestApp() {
+  const [open, setOpen] = React.useState(false);
+
+  const sample = {
+    id: "c1",
+    title: "Festive Promo",
+    brandName: "Sparkle Co",
+    brandAvatar: "",
+    brandEmail: "brand@example.com",
+    overview: "This is a sample campaign overview to test the modal.",
+    requirements: ["1 Reel", "2 Posts"],
+    analytics: { engagementRate: 3.4, avgViews: 12000, matchScore: 80 },
+  };
+
+  return (
+    <div style={{ padding: 24, fontFamily: "Inter, Arial, sans-serif" }}>
+      <h1>Local Test: Sponsorship Modal</h1>
+      <button
+        onClick={() => setOpen(true)}
+        style={{
+          padding: "10px 14px",
+          background: "#4f46e5",
+          color: "white",
+          borderRadius: 8,
+          border: "none",
+          cursor: "pointer",
+        }}
+      >
+        Open Modal
+      </button>
+
+      <SponsorshipModal open={open} onClose={() => setOpen(false)} campaign={sample} />
+    </div>
+  );
+}
+
+const rootEl = document.getElementById("root") || document.body.appendChild(document.createElement("div"));
+createRoot(rootEl as HTMLElement).render(<TestApp />);

From b1ae1fc67598fdf02cb16ddaa09fc88473b882e4 Mon Sep 17 00:00:00 2001
From: Shivampal157 <shivampal60076@gmail.com>
Date: Sun, 14 Dec 2025 14:52:53 +0530
Subject: [PATCH 2/4] Restore correct app entry point and fix main.tsx

---
 Frontend/src/main.tsx | 51 ++++++++++---------------------------------
 1 file changed, 12 insertions(+), 39 deletions(-)

diff --git a/Frontend/src/main.tsx b/Frontend/src/main.tsx
index 42dce18..bcad9f7 100644
--- a/Frontend/src/main.tsx
+++ b/Frontend/src/main.tsx
@@ -1,45 +1,18 @@
-// src/main.tsx — temporary test entry
 import React from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css"; // agar file nahi hai to hata sakte ho (nahin to leave it)
+import { Provider } from "react-redux";
+import App from "./App";
+import store from "./redux/store";
+import "./index.css";
 
-import SponsorshipModal from "./components/SponsorshipModal/SponsorshipModal";
+const root = document.getElementById("root");
 
-function TestApp() {
-  const [open, setOpen] = React.useState(false);
-
-  const sample = {
-    id: "c1",
-    title: "Festive Promo",
-    brandName: "Sparkle Co",
-    brandAvatar: "",
-    brandEmail: "brand@example.com",
-    overview: "This is a sample campaign overview to test the modal.",
-    requirements: ["1 Reel", "2 Posts"],
-    analytics: { engagementRate: 3.4, avgViews: 12000, matchScore: 80 },
-  };
-
-  return (
-    <div style={{ padding: 24, fontFamily: "Inter, Arial, sans-serif" }}>
-      <h1>Local Test: Sponsorship Modal</h1>
-      <button
-        onClick={() => setOpen(true)}
-        style={{
-          padding: "10px 14px",
-          background: "#4f46e5",
-          color: "white",
-          borderRadius: 8,
-          border: "none",
-          cursor: "pointer",
-        }}
-      >
-        Open Modal
-      </button>
-
-      <SponsorshipModal open={open} onClose={() => setOpen(false)} campaign={sample} />
-    </div>
-  );
+if (!root) {
+  throw new Error("Root container missing in index.html");
 }
 
-const rootEl = document.getElementById("root") || document.body.appendChild(document.createElement("div"));
-createRoot(rootEl as HTMLElement).render(<TestApp />);
+createRoot(root).render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+);
\ No newline at end of file

From 907e34764ae89d3220b93011cbfbee18a5258e7b Mon Sep 17 00:00:00 2001
From: Shivampal157 <shivampal60076@gmail.com>
Date: Sun, 14 Dec 2025 16:20:53 +0530
Subject: [PATCH 3/4] Fix JSX className template literal in SponsorshipModal
 tabs

---
 .../SponsorshipModal/SponsorshipModal.tsx     | 220 ++++++++----------
 1 file changed, 91 insertions(+), 129 deletions(-)

diff --git a/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx b/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
index a5be6a0..f5e134c 100644
--- a/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
+++ b/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from "react";
 type Props = {
   open: boolean;
   onClose: () => void;
-  // optional campaign data; you can extend later
   campaign?: {
     title?: string;
     brand?: string;
@@ -11,176 +10,139 @@ type Props = {
   };
 };
 
-export default function SponsorshipModal({ open, onClose, campaign }: Props) {
+type Tab = {
+  id: string;
+  label: string;
+};
+
+export default function SponsorshipModal({
+  open,
+  onClose,
+  campaign,
+}: Props) {
   const [tab, setTab] = useState<string>("overview");
-  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  const tabs: Tab[] = [
+    { id: "overview", label: "Overview" },
+    { id: "requirements", label: "Requirements" },
+    { id: "brand", label: "Brand Info" },
+    { id: "analytics", label: "Analytics" },
+  ];
 
-  // keep focus inside modal when open
   useEffect(() => {
     if (!open) return;
-    const prevActive = document.activeElement as HTMLElement | null;
-    // focus the modal container
     dialogRef.current?.focus();
-
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => {
-      window.removeEventListener("keydown", onKey);
-      prevActive?.focus();
-    };
-  }, [open, onClose]);
+  }, [open]);
+
+  const handleTabKeyDown = (
+    e: React.KeyboardEvent<HTMLButtonElement>,
+    index: number
+  ) => {
+    let nextIndex = index;
+
+    switch (e.key) {
+      case "ArrowRight":
+        nextIndex = (index + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (index - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    setTab(tabs[nextIndex].id);
+    document.getElementById(`tab-${tabs[nextIndex].id}`)?.focus();
+  };
 
   if (!open) return null;
 
   const t = campaign ?? {
     title: "Festive Promo",
     brand: "Sparkle Co",
-    overview: "This is a sample campaign overview to test the modal.",
+    overview: "Sample overview text",
   };
 
-  const tabs = [
-    { id: "overview", label: "Overview" },
-    { id: "requirements", label: "Requirements" },
-    { id: "brand", label: "Brand Info" },
-    { id: "analytics", label: "Analytics" },
-  ];
-
   return (
-    // overlay
     <div
-      aria-modal="true"
       role="dialog"
+      aria-modal="true"
       aria-label="Sponsorship details"
       className="fixed inset-0 z-50 flex items-center justify-center"
     >
-      {/* backdrop */}
       <div
-        onClick={onClose}
         className="absolute inset-0 bg-black/50"
-        data-testid="backdrop"
+        onClick={onClose}
       />
 
-      {/* modal */}
       <div
         ref={dialogRef}
         tabIndex={-1}
-        className="relative z-10 w-full max-w-md mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden"
-        role="document"
+        className="relative z-10 w-full max-w-md bg-white rounded-2xl shadow-xl"
       >
-        {/* header */}
-        <div className="bg-gradient-to-r from-indigo-500 to-pink-400 p-4 text-white flex items-center gap-4">
-          <div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-sm font-semibold">
-            {t.brand?.slice(0, 1) || "B"}
-          </div>
-          <div className="flex-1">
-            <div className="font-bold text-lg">{t.title}</div>
-            <div className="text-sm opacity-90">{t.brand}</div>
-          </div>
-          <div className="text-right text-sm">
-            <div className="text-xs">Match Score</div>
-            <div className="h-2 w-20 bg-white/30 rounded-full mt-1" />
-          </div>
+        {/* Header */}
+        <div className="p-4 bg-indigo-600 text-white rounded-t-2xl">
+          <h2 className="text-lg font-semibold">{t.title}</h2>
+          <p className="text-sm opacity-90">{t.brand}</p>
         </div>
 
-        {/* tabs */}
+        {/* Tabs */}
         <div className="p-4">
-          <div className="flex gap-2 mb-4 flex-wrap">
-            {tabs.map((tt) => {
-              const isActive = tab === tt.id;
-              return (
-                <button
-                  key={tt.id}
-                  role="tab"
-                  aria-selected={isActive}
-                  aria-controls={`tabpanel-${tt.id}`}
-                  id={`tab-${tt.id}`}
-                  tabIndex={isActive ? 0 : -1}
-                  onClick={() => setTab(tt.id)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      setTab(tt.id);
-                    }
-                  }}
-                  className={`px-4 py-2 rounded-full text-sm font-medium transition-shadow focus:outline-none focus:ring-2 focus:ring-indigo-400 ${
-                    isActive
-                      ? "bg-indigo-600 text-white shadow-lg"
+          <div
+            role="tablist"
+            aria-orientation="horizontal"
+            className="flex gap-2 mb-4 flex-wrap"
+          >
+            {tabs.map((tt, index) => (
+              <button
+                key={tt.id}
+                id={`tab-${tt.id}`}
+                role="tab"
+                aria-selected={tab === tt.id}
+                aria-controls={`tabpanel-${tt.id}`}
+                tabIndex={tab === tt.id ? 0 : -1}
+                onClick={() => setTab(tt.id)}
+                onKeyDown={(e) => handleTabKeyDown(e, index)}
+                className={`px-4 py-2 rounded-full text-sm font-medium
+                  focus:outline-none focus:ring-2 focus:ring-indigo-400
+                  ${
+                    tab === tt.id
+                      ? "bg-indigo-600 text-white shadow"
                       : "bg-gray-200 text-gray-800"
                   }`}
-                >
-                  {tt.label}
-                </button>
-              );
-            })}
+              >
+                {tt.label}
+              
+              </button>
+            ))}
           </div>
 
-          {/* content box */}
+          {/* Panel */}
           <div
             id={`tabpanel-${tab}`}
             role="tabpanel"
             aria-labelledby={`tab-${tab}`}
-            className="bg-gray-50 rounded-xl p-4 shadow-sm"
+            className="bg-gray-50 p-4 rounded-xl"
           >
-            {tab === "overview" && (
-              <div>
-                <h3 className="font-semibold text-lg mb-2">Overview</h3>
-                <div className="text-sm text-gray-700">{t.overview}</div>
-              </div>
-            )}
-
-            {tab === "requirements" && (
-              <div>
-                <h3 className="font-semibold text-lg mb-2">Requirements</h3>
-                <ul className="list-disc pl-5 text-sm text-gray-700">
-                  <li>Minimum reach: 50k</li>
-                  <li>Deliverable: 1 short + 1 reel</li>
-                  <li>Timeline: 7 days</li>
-                </ul>
-              </div>
-            )}
-
-            {tab === "brand" && (
-              <div>
-                <h3 className="font-semibold text-lg mb-2">Brand Info</h3>
-                <div className="text-sm text-gray-700">
-                  {t.brand} is a sample brand used for local testing.
-                </div>
-              </div>
-            )}
-
-            {tab === "analytics" && (
-              <div>
-                <h3 className="font-semibold text-lg mb-2">Analytics</h3>
-                <div className="text-sm text-gray-700">
-                  No analytics available in local test mode.
-                </div>
-              </div>
-            )}
+            {tab === "overview" && <p>{t.overview}</p>}
+            {tab === "requirements" && <p>Requirements content</p>}
+            {tab === "brand" && <p>Brand info content</p>}
+            {tab === "analytics" && <p>Analytics content</p>}
           </div>
 
-          {/* footer buttons */}
-          <div className="flex items-center justify-end gap-3 mt-4">
-            <button
-              onClick={() => {
-                // example contact behaviour: open mailto (safe)
-                const mailto = `mailto:brand@example.com?subject=Interested in ${encodeURIComponent(
-                  t.title || "campaign"
-                )}`;
-                const win = window.open(mailto, "_blank");
-                if (!win) window.location.href = mailto;
-              }}
-              className="px-4 py-2 bg-indigo-600 text-white rounded-lg shadow"
-            >
-              Contact
-            </button>
-
+          {/* Footer */}
+          <div className="flex justify-end gap-2 mt-4">
             <button
               onClick={onClose}
-              className="px-4 py-2 bg-white border rounded-lg"
+              className="px-4 py-2 border rounded-lg"
             >
               Close
             </button>
@@ -189,4 +151,4 @@ export default function SponsorshipModal({ open, onClose, campaign }: Props) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 64e2450f7210fc66c73b6bc671298896eae6b345 Mon Sep 17 00:00:00 2001
From: Shivampal157 <shivampal60076@gmail.com>
Date: Sun, 14 Dec 2025 16:48:08 +0530
Subject: [PATCH 4/4] Improve modal accessibility: focus management and Escape
 key handling

---
 .../SponsorshipModal/SponsorshipModal.tsx     | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx b/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
index f5e134c..62c5307 100644
--- a/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
+++ b/Frontend/src/components/SponsorshipModal/SponsorshipModal.tsx
@@ -21,7 +21,9 @@ export default function SponsorshipModal({
   campaign,
 }: Props) {
   const [tab, setTab] = useState<string>("overview");
+
   const dialogRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
 
   const tabs: Tab[] = [
     { id: "overview", label: "Overview" },
@@ -30,11 +32,36 @@ export default function SponsorshipModal({
     { id: "analytics", label: "Analytics" },
   ];
 
+  // 🔹 Focus management (open / close)
+  useEffect(() => {
+    if (open) {
+      triggerRef.current = document.activeElement as HTMLElement;
+
+      // Focus first tab button
+      document.getElementById(`tab-${tabs[0].id}`)?.focus();
+    } else if (triggerRef.current) {
+      triggerRef.current.focus();
+      triggerRef.current = null;
+    }
+  }, [open, tabs]);
+
+  // 🔹 Escape key handling
   useEffect(() => {
     if (!open) return;
-    dialogRef.current?.focus();
-  }, [open]);
 
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  // 🔹 Keyboard navigation for tabs
   const handleTabKeyDown = (
     e: React.KeyboardEvent<HTMLButtonElement>,
     index: number
@@ -78,11 +105,13 @@ export default function SponsorshipModal({
       aria-label="Sponsorship details"
       className="fixed inset-0 z-50 flex items-center justify-center"
     >
+      {/* Overlay */}
       <div
         className="absolute inset-0 bg-black/50"
         onClick={onClose}
       />
 
+      {/* Modal */}
       <div
         ref={dialogRef}
         tabIndex={-1}
@@ -120,12 +149,11 @@ export default function SponsorshipModal({
                   }`}
               >
                 {tt.label}
-              
               </button>
             ))}
           </div>
 
-          {/* Panel */}
+          {/* Tab Panel */}
           <div
             id={`tabpanel-${tab}`}
             role="tabpanel"