added modal popup

Author: QuadAces

frontend/src/components/Sponsors/sponsorModal.tsx

@@ -0,0 +1,28 @@
+import { setFlagsFromString } from 'v8';
+import { sponsorInfo } from '../../../public/data/data';
+//@ts-ignore
+export default function SponsorModal(props: { sponsorInfo: sponsorInfo | null; setFalse: any }) {
+  if (props.sponsorInfo === null) {
+    return (
+      <div>
+        <h1>Error no sponsor selected!</h1>
+      </div>
+    );
+  }
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={() => {
+        props.setFalse();
+      }}
+    >
+      <div className="bg-[#3977f8] mx-[10vw] py-10 rounded-xl overflow-auto flex flex-col items-center justify-center w-[800px]">
+        <a className='m-10' href={props.sponsorInfo.href}>
+          <img src={`./${props.sponsorInfo.svg}`} alt={props.sponsorInfo.alt} />
+        </a>
+        <h3 className="mx-10 py-10">{props.sponsorInfo.description}</h3>
+      <button onClick={props.setFalse} className='bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[70%] xl:h-12 h-10'>close</button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Sponsors/sponsorlinks.tsx

@@ -1,24 +1,39 @@
-import { diamondLinks, goldLinks, silverLinks } from '../../../public/data/data';
+import { useState } from 'react';
+import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '../../../public/data/data';
+import SponsorModal from './sponsorModal';
 //import '/styles/sponsorLinks.module.css';
 const logostyle = 'h-14';
 const logodiv = 'block gap-y-8 h-14';
 const background = 'rgba(57, 119, 248, 0.6)';
 // const outer = 'rounded-[4rem] w-[90rem] flex flex-col pl-14 py-14 gap-16';
 
+
+
 function SponsorLinks() {
+  const [showModal, setShowModal] = useState(false);
+  const [information, setInformation] = useState<sponsorInfo | null>(null);
+  
   return (
     <div className="flex justify-center items-center my-20">
-      <div className="w-100 flex flex-col gap-16">
+      <div className="w-100 flex flex-col gap-16" >
+        {/* @ts-ignore */}
+        {showModal && <SponsorModal sponsorInfo={information} setFalse={() => {setShowModal(false)}}/>}
         <div
           style={{ backgroundColor: `${background}` }}
           className="flex flex-wrap rounded-[1rem] pl-14 py-14 gap-16 items-center"
         >
           <h2 className="text-4xl font-black">Diamond Sponsors</h2>
           {diamondLinks.map((item, index) => {
             return (
-              <a key={index} className={`${logodiv}`} href={item.href}>
+              <div key={index} className={`${logodiv}`} 
+              // href={item.href}
+              onClick={() => {
+                setInformation(item);
+                setShowModal(true);
+              }}
+              >
                 <img className={`${logostyle}`} src={item.svg} alt={item.alt} />
-              </a>
+              </div>
             );
           })}
         </div>
@@ -29,9 +44,15 @@ function SponsorLinks() {
           <h2 className="text-4xl font-black">Gold Sponsors</h2>
           {goldLinks.map((item, index) => {
             return (
-              <a key={index} className="" href={item.href}>
+              <div key={index} className="" 
+              onClick={() => {
+                setInformation(item);
+                setShowModal(true);
+              }}
+              // href={item.href}
+              >
                 <img className="h-6" src={item.svg} alt={item.alt} />
-              </a>
+              </div>
             );
           })}
         </div>

frontend/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -14,9 +18,18 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "forceConsistentCasingInFileNames": true
   },
-  "include": ["./next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "./next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }