|
1 | | -import{sponsorInfo}from'@/../public/data/sponsorInfos'; |
| 1 | +import{X}from"lucide-react" |
| 2 | +import{useEffect}from"react" |
| 3 | +importtype{sponsorInfo}from"@/../public/data/sponsorInfos" |
2 | 4 |
|
3 | | -exportdefaultfunctionSponsorModal(props:{sponsorInfo:sponsorInfo|null;setFalse:()=>void}){ |
4 | | -if(props.sponsorInfo===null){ |
5 | | -return( |
6 | | -<div> |
7 | | -<h1>Error no sponsor selected!</h1> |
8 | | -</div> |
9 | | -); |
| 5 | +exportdefaultfunctionSponsorModal({ |
| 6 | + sponsorInfo, |
| 7 | + setFalse, |
| 8 | +}:{ |
| 9 | +sponsorInfo:sponsorInfo|null |
| 10 | +setFalse:()=>void |
| 11 | +}){ |
| 12 | +// Close modal with Escape key |
| 13 | +useEffect(()=>{ |
| 14 | +consthandleEscKey=(event:KeyboardEvent)=>{ |
| 15 | +if(event.key==="Escape")setFalse() |
| 16 | +} |
| 17 | + |
| 18 | +window.addEventListener("keydown",handleEscKey) |
| 19 | +return()=>window.removeEventListener("keydown",handleEscKey) |
| 20 | +},[setFalse]) |
| 21 | + |
| 22 | +if(sponsorInfo===null){ |
| 23 | +returnnull |
10 | 24 | } |
| 25 | + |
11 | 26 | return( |
12 | 27 | <div |
13 | | -className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50" |
14 | | -onClick={()=>{ |
15 | | -props.setFalse(); |
| 28 | +className="fixed inset-0z-50flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-200" |
| 29 | +onClick={(e)=>{ |
| 30 | +if(e.target===e.currentTarget)setFalse() |
16 | 31 | }} |
17 | 32 | > |
18 | | -<divclassName="bg-[#4b5e80] relative w-[800px] h-[550px] mb-10 mx-10 rounded-xl flex flex-col items-center justify-center"> |
19 | | -<a |
20 | | -className="w-4/5 m-5 flex flex-col items-center justify-center transform transition-transform duration-300 hover:scale-105" |
21 | | -href={props.sponsorInfo.href} |
22 | | -target="_blank" |
23 | | -> |
24 | | -<img |
25 | | -className="w-4/5 max-w-[300px] max-h-[200px]" |
26 | | -src={`./${props.sponsorInfo.svg}`} |
27 | | -alt={props.sponsorInfo.alt} |
28 | | -/> |
29 | | -</a> |
30 | | -<h3className="mx-10 py-10">{props.sponsorInfo.description}</h3> |
| 33 | +<div |
| 34 | +className="relative w-full max-w-2xl mx-4 overflow-hidden bg-slate-900 rounded-xl shadow-xl animate-in zoom-in-95 duration-200" |
| 35 | +onClick={(e)=>e.stopPropagation()} |
| 36 | +> |
| 37 | +{/* Close button */} |
31 | 38 | <button |
32 | | -onClick={props.setFalse} |
33 | | -className="bg-white border absolute bottom-10 text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[70%] xl:h-12 h-10" |
| 39 | +onClick={setFalse} |
| 40 | +className="absolute top-4 right-4 p-1.5 rounded-full bg-slate-900 hover:bg-gray-800 transition-colors" |
| 41 | +aria-label="Close modal" |
34 | 42 | > |
35 | | -Close |
| 43 | +<XclassName="w-5 h-5 text-gray-600"/> |
36 | 44 | </button> |
| 45 | + |
| 46 | +<divclassName="flex flex-col p-6"> |
| 47 | +{/* Sponsor logo */} |
| 48 | +<divclassName="flex justify-center py-8 border-b"> |
| 49 | +<a |
| 50 | +href={sponsorInfo.href} |
| 51 | +target="_blank" |
| 52 | +rel="noopener noreferrer" |
| 53 | +className="transition-transform hover:scale-105 focus:scale-105 focus:outline-none" |
| 54 | +aria-label={`Visit${sponsorInfo.alt}`} |
| 55 | +> |
| 56 | +<divclassName="relative w-64 h-32"> |
| 57 | +<imgsrc={`./${sponsorInfo.svg}`}alt={sponsorInfo.alt}className="object-contain w-full h-full"/> |
| 58 | +</div> |
| 59 | +</a> |
| 60 | +</div> |
| 61 | + |
| 62 | +{/* Sponsor description */} |
| 63 | +<divclassName="py-6"> |
| 64 | +<h2className="mb-2 text-xl font-semibold text-gray-300">About{sponsorInfo.name}</h2> |
| 65 | +<pclassName="text-gray-400 leading-relaxed">{sponsorInfo.description}</p> |
| 66 | +</div> |
| 67 | + |
| 68 | +{/* Action buttons */} |
| 69 | +<divclassName="flex flex-col sm:flex-row gap-3 mt-4"> |
| 70 | +<a |
| 71 | +href={sponsorInfo.href} |
| 72 | +target="_blank" |
| 73 | +rel="noopener noreferrer" |
| 74 | +className="flex-1 px-4 py-3 text-center font-medium text-white bg-gradient-to-r bg-blue-700 rounded-lg hover:bg-blue-800 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2" |
| 75 | +> |
| 76 | +<svg |
| 77 | +xmlns="http://www.w3.org/2000/svg" |
| 78 | +className="h-5 w-5" |
| 79 | +fill="none" |
| 80 | +viewBox="0 0 24 24" |
| 81 | +stroke="currentColor" |
| 82 | +> |
| 83 | +<path |
| 84 | +strokeLinecap="round" |
| 85 | +strokeLinejoin="round" |
| 86 | +strokeWidth={2} |
| 87 | +d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" |
| 88 | +/> |
| 89 | +</svg> |
| 90 | + Visit Website |
| 91 | +</a> |
| 92 | +<button |
| 93 | +onClick={setFalse} |
| 94 | +className="flex-1 px-4 py-3 text-center font-medium text-gray-700 gray-200 border border-gray-400 rounded-lg bg-gray-100 hover:bg-gray-200 hover:gray-300 shadow-sm hover:shadow-md transform hover:-translate-y-0.5 transition-all duration-300 flex items-center justify-center gap-2" |
| 95 | +> |
| 96 | +<svg |
| 97 | +xmlns="http://www.w3.org/2000/svg" |
| 98 | +className="h-5 w-5" |
| 99 | +fill="none" |
| 100 | +viewBox="0 0 24 24" |
| 101 | +stroke="currentColor" |
| 102 | +> |
| 103 | +<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth={2}d="M6 18L18 6M6 6l12 12"/> |
| 104 | +</svg> |
| 105 | + Close |
| 106 | +</button> |
| 107 | +</div> |
| 108 | +</div> |
37 | 109 | </div> |
38 | 110 | </div> |
39 | | -); |
40 | | -} |
| 111 | +) |
| 112 | +} |