@@ -10,10 +10,18 @@ interface PartnersProps extends PropsWithChildren {
1010interface PartnersGridProps extends PropsWithChildren {
1111 edition : string ;
1212 partners : Partner [ ] ;
13- small ?: boolean ;
13+ size ?: "small" | "medium" | "big" | "xl" ;
1414}
1515
16- function PartnersGrid ( { partners, edition, small = false } : PartnersGridProps ) {
16+ function PartnersGrid ( { partners, edition, size = "big" } : PartnersGridProps ) {
17+ const imageSize =
18+ size === "small"
19+ ? 140
20+ : size === "medium"
21+ ? 160
22+ : size === "xl"
23+ ? 200
24+ : 180 ;
1725 return (
1826 < div className = "flex flex-col md:flex-row justify-center items-center flex-wrap py-6 border-dotted border-grey border-b-2" >
1927 { partners . map ( ( { name, logo, link, edition : partnerEdition } ) => (
@@ -29,12 +37,15 @@ function PartnersGrid({ partners, edition, small = false }: PartnersGridProps) {
2937 rel = "nofollow noreferrer noopener"
3038 className = { classNames (
3139 "flex items-center justify-center flex-col" ,
32- small ? "max-w-[180px]" : " max-w-[240px]"
40+ size === "small" && "max-w-[180px]" ,
41+ size === "medium" && "max-w-[200]" ,
42+ size === "big" && "max-w-[220px]" ,
43+ size === "xl" && "max-w-[240px]"
3344 ) }
3445 >
3546 < img
36- width = { small ? 140 : 200 }
37- height = { small ? 140 : 200 }
47+ width = { imageSize }
48+ height = { imageSize }
3849 src = { `/images/con/${
3950 partnerEdition || edition
4051 } /partners/${ logo } .png`}
@@ -49,13 +60,24 @@ function PartnersGrid({ partners, edition, small = false }: PartnersGridProps) {
4960}
5061
5162export default function Partners ( { edition, data } : PartnersProps ) {
52- const sponsors = data . filter ( ( p ) => p . rank < 3 ) ;
53- const partners = data . filter ( ( p ) => p . rank >= 3 ) ;
63+ const gold = data . filter ( ( p ) => p . rank === 1 ) ;
64+ const silver = data . filter ( ( p ) => p . rank === 2 ) ;
65+ const bronze = data . filter ( ( p ) => p . rank === 3 ) ;
66+ const partners = data . filter ( ( p ) => p . rank > 3 ) ;
67+
5468 return (
5569 < div className = "mb-12" >
56- < PartnersGrid edition = { edition } partners = { sponsors } />
70+ { gold . length > 0 ? (
71+ < PartnersGrid edition = { edition } partners = { gold } size = "xl" />
72+ ) : null }
73+ { silver . length > 0 ? (
74+ < PartnersGrid edition = { edition } partners = { silver } />
75+ ) : null }
76+ { bronze . length > 0 ? (
77+ < PartnersGrid edition = { edition } partners = { bronze } size = "medium" />
78+ ) : null }
5779 { partners . length > 0 ? (
58- < PartnersGrid edition = { edition } partners = { partners } small />
80+ < PartnersGrid edition = { edition } partners = { partners } size = " small" />
5981 ) : null }
6082 </ div >
6183 ) ;
0 commit comments