diff --git a/client/public/facebook-logo.png b/client/public/logos/facebook-logo.png similarity index 100% rename from client/public/facebook-logo.png rename to client/public/logos/facebook-logo.png diff --git a/client/public/logos/instagram-logo.png b/client/public/logos/instagram-logo.png new file mode 100644 index 0000000..c074379 --- /dev/null +++ b/client/public/logos/instagram-logo.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:21f86b55f986848665ce54ab354ff6b43b7705e6c421d90c04369882b5956766 +size 2648790 diff --git a/client/public/logos/website-logo.png b/client/public/logos/website-logo.png new file mode 100644 index 0000000..b3ad303 --- /dev/null +++ b/client/public/logos/website-logo.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b2eb2103aadf922017a07cdc5e8ce6bc0627b358c7d7227900c69ca89e091a03 +size 246153 diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx index 8066117..b8e8db4 100644 --- a/client/src/components/Footer.tsx +++ b/client/src/components/Footer.tsx @@ -102,7 +102,7 @@ const Footer: React.FC = () => { className="inline-block mt-4 transition-transform duration-300 ease-in-out transform hover:scale-110" > Facebook void; + websiteUrl?: string; + facebookUrl?: string; + instagramUrl?: string; } -const SponsorCard: React.FC = ({ name, logoPath, onClick }) => ( +const SponsorCard: React.FC = ({ name, logoPath, onClick, websiteUrl, facebookUrl, instagramUrl }) => ( = ({ name, logoPath, onClick }) => onClick={onClick} >

{name}

-
+
{`${name}
+
+ {websiteUrl && ( + e.stopPropagation()}> + Website + + )} + {facebookUrl && ( + e.stopPropagation()}> + Facebook + + )} + {instagramUrl && ( + e.stopPropagation()}> + Instagram + + )} +
); -const Popup: React.FC<{ isOpen: boolean; onClose: () => void; children: React.ReactNode }> = ({ isOpen, onClose, children }) => ( +interface PopupProps { + isOpen: boolean; + onClose: () => void; + children: React.ReactNode; + websiteUrl?: string; + facebookUrl?: string; + instagramUrl?: string; +} + +const Popup: React.FC = ({ isOpen, onClose, children, websiteUrl, facebookUrl, instagramUrl }) => ( {isOpen && ( void; children: React.Re onClick={(e) => e.stopPropagation()} > {children} +
+ {websiteUrl && ( + + Website + + )} + {facebookUrl && ( + + Facebook + + )} + {instagramUrl && ( + + Instagram + + )} +
@@ -47,13 +93,39 @@ const Popup: React.FC<{ isOpen: boolean; onClose: () => void; children: React.Re
); +interface SponsorInfo { + description: string; + logoPath: string; + websiteUrl?: string; + facebookUrl?: string; + instagramUrl?: string; +} + const Sponsors: React.FC = () => { const [selectedSponsor, setSelectedSponsor] = useState(null); - const sponsorInfo = { - "Drum Coffee": "Drum Coffee partnered with MCDi to provide ASL lessons on coffee-related signology, enhancing their ability to serve Deaf community members. This initiative promotes inclusivity and improves communication in their bustling cafe environment.", - "Imagine Nation Brewing": "Imagine Nation Brewing hosted a vibrant fundraising event, donating proceeds to MCDi. Their generous support not only raised funds but also raised awareness about the Deaf community, making a significant impact on our mission.", - "Gild Brewing": "Gild Brewing organized a community-focused fundraiser for MCDi, combining craft beer tasting with Deaf culture education. Their event not only raised funds but also fostered a deeper understanding of Deaf culture, making a significant impact on our mission.", + const sponsorInfo: Record = { + "Drum Coffee": { + description: "Drum Coffee partnered with MCDi to provide ASL lessons on coffee-related signology, enhancing their ability to serve Deaf community members. This initiative promotes inclusivity and improves communication in their bustling cafe environment.", + logoPath: "/sponsors/drum-coffee-missoula.png", + websiteUrl: "https://drumcoffeeroasting.com/", + facebookUrl: "https://www.facebook.com/drumcoffeemt", + instagramUrl: "https://www.instagram.com/drumcoffee/" + }, + "Imagine Nation Brewing": { + description: "Imagine Nation Brewing hosted a vibrant fundraising event, donating proceeds to MCDi. Their generous support not only raised funds but also raised awareness about the Deaf community, making a significant impact on our mission.", + logoPath: "/sponsors/imagine-nation-brewing.png", + websiteUrl: "https://imaginenationbrewing.com/", + facebookUrl: "https://www.facebook.com/ImagineNationBrewing", + instagramUrl: "https://www.instagram.com/imaginenationbrewingco" + }, + "Gild Brewing": { + description: "Gild Brewing organized a community-focused fundraiser for MCDi, combining craft beer tasting with Deaf culture education. Their event not only raised funds but also fostered a deeper understanding of Deaf culture, making a significant impact on our mission.", + logoPath: "/sponsors/gild-brewing.png", + websiteUrl: "https://www.gildbrewing.com/", + facebookUrl: "https://www.facebook.com/gildbrewing/", + instagramUrl: "https://www.instagram.com/gildbrewing/" + }, }; return ( @@ -66,32 +138,32 @@ const Sponsors: React.FC = () => {

Our Sponsors

- setSelectedSponsor("Drum Coffee")} - /> - setSelectedSponsor("Imagine Nation Brewing")} - /> - setSelectedSponsor("Gild Brewing")} - /> + {Object.entries(sponsorInfo).map(([name, info]) => ( + setSelectedSponsor(name)} + websiteUrl={info.websiteUrl} + facebookUrl={info.facebookUrl} + instagramUrl={info.instagramUrl} + /> + ))}
- setSelectedSponsor(null)}> + setSelectedSponsor(null)} + websiteUrl={selectedSponsor ? sponsorInfo[selectedSponsor].websiteUrl : undefined} + facebookUrl={selectedSponsor ? sponsorInfo[selectedSponsor].facebookUrl : undefined} + instagramUrl={selectedSponsor ? sponsorInfo[selectedSponsor].instagramUrl : undefined} + > {selectedSponsor && ( <>

{selectedSponsor}

-

{sponsorInfo[selectedSponsor as keyof typeof sponsorInfo]}

+

{sponsorInfo[selectedSponsor].description}

)}