From 30339432ebd2ba74dfd7394cd0cf0409383f49ae Mon Sep 17 00:00:00 2001 From: Shivampal157 Date: Mon, 17 Nov 2025 04:02:45 +0530 Subject: [PATCH] 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("overview"); + const dialogRef = useRef(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 +
+ {/* backdrop */} +
+ + {/* modal */} +
+ {/* header */} +
+
+ {t.brand?.slice(0, 1) || "B"} +
+
+
{t.title}
+
{t.brand}
+
+
+
Match Score
+
+
+
+ + {/* tabs */} +
+
+ {tabs.map((tt) => { + const isActive = tab === tt.id; + return ( + + ); + })} +
+ + {/* content box */} +
+ {tab === "overview" && ( +
+

Overview

+
{t.overview}
+
+ )} + + {tab === "requirements" && ( +
+

Requirements

+
    +
  • Minimum reach: 50k
    • +
  • Deliverable: 1 short + 1 reel
    • +
  • Timeline: 7 days
    • +
+
+ )} + + {tab === "brand" && ( +
+

Brand Info

+
+ {t.brand} is a sample brand used for local testing. +
+
+ )} + + {tab === "analytics" && ( +
+

Analytics

+
+ No analytics available in local test mode. +
+
+ )} +
+ + {/* footer buttons */} +
+ + + +
+
+
+
+ ); +} 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( - // - - - - // , -); +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 ( +
+

Local Test: Sponsorship Modal

+ + + setOpen(false)} campaign={sample} /> +
+ ); +} + +const rootEl = document.getElementById("root") || document.body.appendChild(document.createElement("div")); +createRoot(rootEl as HTMLElement).render();