Skip to content

Commit f761f17

Browse files
rahul-vyas-devrahul-vyas-dev
authored
Merge pull request #26 from rahul-vyas-dev/main
fix: improve organization's sponsor logo rendering
2 parents 59fd0c6 + 2d3054a commit f761f17

File tree

1 file changed

+148
-146
lines changed

1 file changed

+148
-146
lines changed

‎src/components/SupportUsButton.tsx‎

Lines changed: 148 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -82,19 +82,19 @@ function SupportUsButton({
8282
}: supportUsButtonProps): React.JSX.Element {
8383
const validatedUrl = validateUrl(organizationInformation?.url);
8484
const logoContent =
85-
typeof organizationInformation.logo === "string" ? (
86-
<span className="block h-fit w-fit p-4 bg-black text-white rounded-2xl">
87-
<b className="text-2xl italic">{organizationInformation.logo}</b>
88-
</span>
89-
) : (
90-
<img
91-
className="w-24 h-24 bg-white/80 select-none rounded-2xl object-cover object-center"
92-
src={organizationInformation.logo?.src}
93-
alt={organizationInformation.logo?.alt}
94-
title={organizationInformation.logo?.alt}
95-
draggable={false}
96-
/>
97-
);
85+
typeof organizationInformation.logo === "string" ? (
86+
<span className="block h-fit w-fit p-4 bg-black text-white rounded-2xl">
87+
<b className="text-2xl italic">{organizationInformation.logo}</b>
88+
</span>
89+
) : (
90+
<img
91+
className="w-24 h-24 bg-white/80 select-none rounded-2xl object-cover object-center"
92+
src={organizationInformation.logo?.src}
93+
alt={organizationInformation.logo?.alt}
94+
title={organizationInformation.logo?.alt}
95+
draggable={false}
96+
/>
97+
);
9898
return (
9999
// Container for the support us button, with dynamic classes based on the selected theme and custom class names
100100
<div
@@ -188,8 +188,8 @@ function SupportUsButton({
188188
)}
189189

190190
{/* Organization logo */}
191-
192-
<div>
191+
192+
<div>
193193
{organizationInformation?.logo &&
194194
(validatedUrl ? (
195195
<a
@@ -261,18 +261,19 @@ function SupportUsButton({
261261
</div>
262262

263263
{/* Sponsors section */}
264-
<div
265-
className={`w-full flex justify-center mt-10 p-10
264+
{sponsors && sponsors.length > 0 && (
265+
<div
266+
className={`w-full flex justify-center mt-10 p-10
266267
${Theme === "AOSSIE" && "bg-[#1f1f1f]"}
267268
${Theme === "light" && "bg-gray-300/50"}
268269
${Theme === "dark" && "bg-gray-700/50"}
269270
${Theme === "minimal" && "bg-gray-800/50"}
270271
${Theme === "corporate" && "bg-blue-600/50"}`}
271-
>
272-
{sponsors && sponsors.length > 0 && (
273-
// List of sponsors with their logos and links, styled according to the selected theme and custom class names
274-
<div
275-
className={`${classNames.sponsors} ${classAccordingToTheme(Theme)}
272+
>
273+
{sponsors && sponsors.length > 0 && (
274+
// List of sponsors with their logos and links, styled according to the selected theme and custom class names
275+
<div
276+
className={`${classNames.sponsors} ${classAccordingToTheme(Theme)}
276277
277278
// Shadows for different themes
278279
${Theme === "AOSSIE" && "shadow-[0_0_15px_rgba(255,215,0,1)]"}
@@ -282,46 +283,46 @@ function SupportUsButton({
282283
${Theme === "corporate" && "shadow-[0_0_25px_rgba(37,99,235,0.3)]"}
283284
284285
relative w-[90%] flex flex-col p-8 rounded-2xl gap-25 mt-15 overflow-hidden`}
285-
>
286-
{/* Sponsor pattern AOSSIE */}
287-
{pattern === "AOSSIE" && (
288-
<div className="absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-AOSSIE opacity-60"></div>
289-
)}
290-
{/* Sponsor pattern Grid */}
291-
{pattern === "grid" && (
292-
<div className="absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-grid opacity-60"></div>
293-
)}
294-
{/* Sponsor pattern Dots */}
295-
{pattern === "dots" && (
296-
<div className="absolute bottom-0 inset-x-0 h-1/2 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100"></div>
297-
)}
286+
>
287+
{/* Sponsor pattern AOSSIE */}
288+
{pattern === "AOSSIE" && (
289+
<div className="absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-AOSSIE opacity-60"></div>
290+
)}
291+
{/* Sponsor pattern Grid */}
292+
{pattern === "grid" && (
293+
<div className="absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-grid opacity-60"></div>
294+
)}
295+
{/* Sponsor pattern Dots */}
296+
{pattern === "dots" && (
297+
<div className="absolute bottom-0 inset-x-0 h-1/2 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100"></div>
298+
)}
298299

299-
{/* Section title */}
300-
<div className="mt-5 flex justify-center">
301-
<div className="w-fit flex flex-col gap-5 justify-center items-center">
302-
<h2
303-
className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}
304-
>
305-
Our Sponsors
306-
</h2>
300+
{/* Section title */}
301+
<div className="mt-5 flex justify-center">
302+
<div className="w-fit flex flex-col gap-5 justify-center items-center">
303+
<h2
304+
className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}
305+
>
306+
Our Sponsors
307+
</h2>
307308

308-
{/* Underline */}
309-
<div className={`border-3 rounded-4xl w-1/2`}></div>
309+
{/* Underline */}
310+
<div className={`border-3 rounded-4xl w-1/2`}></div>
311+
</div>
310312
</div>
311-
</div>
312313

313-
{/* Sponsor logos */}
314-
<div className="flex flex-row flex-wrap justify-center items-center gap-10 z-10">
315-
{sponsors.map((sponsor, index) => (
316-
<a
317-
href={sponsor.link}
318-
key={index}
319-
target="_blank"
320-
rel="noopener noreferrer"
321-
title={`Visit ${sponsor.name}'s website`}
322-
>
323-
<div
324-
className={`${Theme === "dark" ? "bg-gray-800 text-white" : "bg-white text-black"} rounded-lg flex flex-col justify-center items-center gap-2 p-8 w-fit transition-transform hover:scale-[1.02] shadow-lg min-h-75 min-w-62.5 hover:border-2
314+
{/* Sponsor logos */}
315+
<div className="flex flex-row flex-wrap justify-center items-center gap-10 z-10">
316+
{sponsors.map((sponsor, index) => (
317+
<a
318+
href={sponsor.link}
319+
key={index}
320+
target="_blank"
321+
rel="noopener noreferrer"
322+
title={`Visit ${sponsor.name}'s website`}
323+
>
324+
<div
325+
className={`${Theme === "dark" ? "bg-gray-800 text-white" : "bg-white text-black"} rounded-lg flex flex-col justify-center items-center gap-2 p-8 w-fit transition-transform hover:scale-[1.02] shadow-lg min-h-75 min-w-62.5 hover:border-2
325326
326327
// Shadows for different themes
327328
${Theme === "AOSSIE" && "shadow-primary/20"}
@@ -336,109 +337,110 @@ function SupportUsButton({
336337
${sponsor.sponsorshipTier === "Silver" && "min-w-60 min-h-70"}
337338
${sponsor.sponsorshipTier === "Bronze" && "min-w-50 min-h-60"}
338339
`}
339-
>
340-
{sponsor.logo ? (
341-
<div className="relative">
342-
<img
343-
src={sponsor.logo}
344-
alt={sponsor.name}
345-
title={sponsor.name}
346-
className={`w-50 h-40 object-cover object-center rounded-lg
340+
>
341+
{sponsor.logo ? (
342+
<div className="relative">
343+
<img
344+
src={sponsor.logo}
345+
alt={sponsor.name}
346+
title={sponsor.name}
347+
className={`w-50 h-40 object-cover object-center rounded-lg
347348
${sponsor.sponsorshipTier === "Platinum" && "w-60 h-50"}
348349
${sponsor.sponsorshipTier === "Gold" && "w-55 h-45"}
349350
${sponsor.sponsorshipTier === "Silver" && "w-50 h-40"}
350351
${sponsor.sponsorshipTier === "Bronze" && "w-45 h-35"}
351352
`}
352-
draggable={false}
353-
/>
354-
{/* Sponsor tier icon */}
355-
<div
356-
className={`absolute rotate-12
353+
draggable={false}
354+
/>
355+
{/* Sponsor tier icon */}
356+
<div
357+
className={`absolute rotate-12
357358
358359
${sponsor.sponsorshipTier === "Platinum" && "rotate-12 -top-4 -right-1"}
359360
${sponsor.sponsorshipTier === "Gold" && "rotate-20 -top-4.5 -right-2.5"}
360361
${sponsor.sponsorshipTier === "Silver" && "rotate-30 -top-5.5 -right-4.5"}
361362
${sponsor.sponsorshipTier === "Bronze" && "rotate-40 -top-3 -right-3"}
362363
`}
363-
>
364-
{/* Platinum tier icon */}
365-
{sponsor.sponsorshipTier === "Platinum" && (
366-
<svg
367-
xmlns="http://www.w3.org/2000/svg"
368-
width="24"
369-
height="24"
370-
fill="currentColor"
371-
viewBox="0 0 24 24"
372-
>
373-
<title>Platinum tier icon</title>
374-
<path d="M3 7l4 4 5-7 5 7 4-4v11H3V7z" />
375-
</svg>
376-
)}
377-
{/* Gold tier icon */}
378-
{sponsor.sponsorshipTier === "Gold" && (
379-
<svg
380-
xmlns="http://www.w3.org/2000/svg"
381-
width="24"
382-
height="24"
383-
fill="currentColor"
384-
viewBox="0 0 24 24"
385-
>
386-
<title>Gold tier icon</title>
387-
<path d="M6 2h12v3h3v3a5 5 0 0 1-5 5h-1a5 5 0 0 1-4 3.9V20h4v2H9v-2h4v-3.1A5 5 0 0 1 9 13H8a5 5 0 0 1-5-5V5h3V2z" />
388-
</svg>
389-
)}
390-
{/* Silver tier icon */}
391-
{sponsor.sponsorshipTier === "Silver" && (
392-
<svg
393-
xmlns="http://www.w3.org/2000/svg"
394-
width="32"
395-
height="32"
396-
fill="currentColor"
397-
viewBox="0 0 24 24"
398-
>
399-
<title>Silver tier icon</title>
400-
<path d="M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2l-3 6 3-2 3 2-3-6z" />
401-
</svg>
402-
)}
403-
{/* Bronze tier icon */}
404-
{sponsor.sponsorshipTier === "Bronze" && (
405-
<svg
406-
xmlns="http://www.w3.org/2000/svg"
407-
width="24"
408-
height="24"
409-
fill="currentColor"
410-
viewBox="0 0 24 24"
411-
>
412-
<title>Bronze tier icon</title>
413-
<path d="M2 12l5-5 4 4 4-4 7 7-5 5-4-4-4 4-7-7z" />
414-
</svg>
415-
)}
364+
>
365+
{/* Platinum tier icon */}
366+
{sponsor.sponsorshipTier === "Platinum" && (
367+
<svg
368+
xmlns="http://www.w3.org/2000/svg"
369+
width="24"
370+
height="24"
371+
fill="currentColor"
372+
viewBox="0 0 24 24"
373+
>
374+
<title>Platinum tier icon</title>
375+
<path d="M3 7l4 4 5-7 5 7 4-4v11H3V7z" />
376+
</svg>
377+
)}
378+
{/* Gold tier icon */}
379+
{sponsor.sponsorshipTier === "Gold" && (
380+
<svg
381+
xmlns="http://www.w3.org/2000/svg"
382+
width="24"
383+
height="24"
384+
fill="currentColor"
385+
viewBox="0 0 24 24"
386+
>
387+
<title>Gold tier icon</title>
388+
<path d="M6 2h12v3h3v3a5 5 0 0 1-5 5h-1a5 5 0 0 1-4 3.9V20h4v2H9v-2h4v-3.1A5 5 0 0 1 9 13H8a5 5 0 0 1-5-5V5h3V2z" />
389+
</svg>
390+
)}
391+
{/* Silver tier icon */}
392+
{sponsor.sponsorshipTier === "Silver" && (
393+
<svg
394+
xmlns="http://www.w3.org/2000/svg"
395+
width="32"
396+
height="32"
397+
fill="currentColor"
398+
viewBox="0 0 24 24"
399+
>
400+
<title>Silver tier icon</title>
401+
<path d="M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2l-3 6 3-2 3 2-3-6z" />
402+
</svg>
403+
)}
404+
{/* Bronze tier icon */}
405+
{sponsor.sponsorshipTier === "Bronze" && (
406+
<svg
407+
xmlns="http://www.w3.org/2000/svg"
408+
width="24"
409+
height="24"
410+
fill="currentColor"
411+
viewBox="0 0 24 24"
412+
>
413+
<title>Bronze tier icon</title>
414+
<path d="M2 12l5-5 4 4 4-4 7 7-5 5-4-4-4 4-7-7z" />
415+
</svg>
416+
)}
417+
</div>
416418
</div>
417-
</div>
418-
) : (
419-
<span
420-
className="block h-fit w-full p-5 bg-black text-white rounded-2xl"
421-
title={sponsor.name}
422-
>
423-
<b className="text-3xl italic">{sponsor.name}</b>
424-
</span>
425-
)}
426-
427-
<div className="w-full">
428-
<h3 className={`font-bold text-2xl`}>{sponsor.name}</h3>
429-
{sponsor.sponsorshipTier && (
430-
<span className="flex text-[16px] p-2 rounded-xl items-center mt-3.5 font-semibold bg-[#d0f2eb] text-black w-fit">
431-
{sponsor.sponsorshipTier}
419+
) : (
420+
<span
421+
className="block h-fit w-full p-5 bg-black text-white rounded-2xl"
422+
title={sponsor.name}
423+
>
424+
<b className="text-3xl italic">{sponsor.name}</b>
432425
</span>
433426
)}
427+
428+
<div className="w-full">
429+
<h3 className={`font-bold text-2xl`}>{sponsor.name}</h3>
430+
{sponsor.sponsorshipTier && (
431+
<span className="flex text-[16px] p-2 rounded-xl items-center mt-3.5 font-semibold bg-[#d0f2eb] text-black w-fit">
432+
{sponsor.sponsorshipTier}
433+
</span>
434+
)}
435+
</div>
434436
</div>
435-
</div>
436-
</a>
437-
))}
437+
</a>
438+
))}
439+
</div>
438440
</div>
439-
</div>
440-
)}
441-
</div>
441+
)}
442+
</div>
443+
)}
442444

443445
{/* Call-to-action section with title, description, and sponsor links */}
444446
<div
@@ -478,4 +480,4 @@ function SupportUsButton({
478480
);
479481
}
480482

481-
export default SupportUsButton;
483+
export default SupportUsButton;

0 commit comments

Comments
 (0)