feat(ui/web): add mlh banner

cuhacking · Feb 19, 2025 · 569a67f · 569a67f
1 parent 0c3aa6f
commit 569a67f
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 1 deletion.
diff --git a/libs/website/layouts/base.tsx b/libs/website/layouts/base.tsx
@@ -10,6 +10,7 @@ export function Layout({ children }: { children: ReactNode }) {
   return (
     <>
       <NavbarContainer
+        banner={NAVBAR_CONSTANTS.MLH_BANNER}
         links={NAVBAR_CONSTANTS.LINKS}
         logo={NAVBAR_CONSTANTS.LOGO}
         socials={NAVBAR_CONSTANTS.SOCIALS}

diff --git a/libs/website/shared/ui/navigation/navbar/constants/navbar.constants.ts b/libs/website/shared/ui/navigation/navbar/constants/navbar.constants.ts
@@ -10,6 +10,7 @@ import instagram_white from '@cuhacking/shared/assets/icons/socials/instagram-wh
 import linkedin_white from '@cuhacking/shared/assets/icons/socials/linkedin-white-1.svg'
 import linktree_white from '@cuhacking/shared/assets/icons/socials/linktree-white-1.svg'
 import cuHackingLogo from '@cuhacking/shared/assets/logos/cuHacking/cuhacking-logo-1.svg'
+import mlhBanner from '@cuhacking/shared/assets/logos/sponsors/mlh-banner.svg'
 
 const links = [
   { name: 'ABOUT', link: '/#about' },
@@ -18,6 +19,16 @@ const links = [
   { name: 'FAQ', link: '/#faq' },
 ]
 
+const banner: { link: string, name: string, media: Media }
+  = {
+    link: 'https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2025-season&utm_content=black',
+    name: 'MLH Banner',
+    media: {
+      src: mlhBanner,
+      alt: 'Major League Hacking 2025 Hackathon Season',
+    },
+  }
+
 const socials: { link: string, name: string, media: Media }[] = [
   {
     link: 'https://www.instagram.com/cuhacking/',
@@ -90,6 +101,7 @@ export const NAVBAR_CONSTANTS = {
   SOCIALS: socials,
   LINKS: links,
   LOGO: cuHackingLogo,
+  MLH_BANNER: banner,
   HAMBURGER: {
     src: hamburger,
     alt: 'Hambuger icon',

diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.container.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.container.tsx
@@ -11,7 +11,13 @@ interface NavbarProps {
     link: string
   }[]
   logo: string
+  banner: {
+    name: string
+    link: string
+    media: Media
+  }[]
   socials: {
+    name: string
     link: string
     media: Media
   }[]
@@ -21,6 +27,7 @@ interface NavbarProps {
 export function NavbarContainer({
   links,
   logo,
+  banner,
   socials,
   hamburger,
   cross,
@@ -30,6 +37,7 @@ export function NavbarContainer({
       <NavbarPresenter
         links={links}
         logo={logo}
+        banner={banner}
         socials={socials}
         hamburger={hamburger}
         cross={cross}

diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.stories.tsx
@@ -10,6 +10,7 @@ import instagram_white from '@cuhacking/shared/assets/icons/socials/instagram-wh
 import linkedin_white from '@cuhacking/shared/assets/icons/socials/linkedin-white-1.svg'
 import linktree_white from '@cuhacking/shared/assets/icons/socials/linktree-white-1.svg'
 import logo from '@cuhacking/shared/assets/logos/cuHacking/cuhacking-logo-1.svg'
+import mlhBanner from '@cuhacking/shared/assets/logos/sponsors/mlh-banner.svg'
 import { createRemixStub } from '@remix-run/testing'
 import { NavbarPresenter } from './navbar.presenter'
 
@@ -42,57 +43,76 @@ const meta = {
   },
 } satisfies Meta<typeof NavbarPresenter>
 
+const banner = [
+  {
+    name: 'MLH Banner',
+    link: 'https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2025-season&utm_content=black',
+    media: {
+      src: mlhBanner.src,
+      alt: 'Major League Hacking 2025 Hackathon Season',
+    },
+  },
+]
+
 const socials = [
   {
+    name: 'GitHub',
     link: 'https://github.com',
     media: {
       src: github_white.src,
       alt: 'GitHub',
     },
   },
   {
+    name: 'Instagram',
     link: 'https://instagram.com',
     media: {
       src: instagram_white.src,
       alt: 'Instagram',
     },
   },
   {
+    name: 'LinkedIn',
     link: 'https://linkedin.com',
     media: {
       src: linkedin_white.src,
       alt: 'LinkedIn',
     },
   },
   {
+    name: 'Linktree',
     link: 'https://linktr.ee',
     media: {
       src: linktree_white.src,
       alt: 'Linktree',
     },
   },
   {
+    name: 'Email',
     link: 'mailto:[email protected]',
     media: {
       src: email_white.src,
       alt: 'Email',
     },
   },
   {
+    name: 'Discord',
     link: 'https://discord.com',
     media: {
       src: discord_white.src,
       alt: 'Discord',
     },
   },
   {
+    name: 'Documentation',
     link: 'https://docs.com',
     media: {
       src: docs_white.src,
       alt: 'Documentation',
     },
   },
   {
+    name: 'Figma',
     link: 'https://figma.com',
     media: {
       src: figma_white.src,
@@ -114,6 +134,7 @@ export const Default: Story = {
       { name: 'FAQ', link: '/#faq' },
     ],
     logo: logo.src,
+    banner,
     socials,
     hamburger: {
       src: hamburger.src,

diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx
@@ -12,8 +12,9 @@ import {
 } from '@cuhacking/shared/ui/navigation-menu'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { Link } from '@remix-run/react'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { ClientOnly } from 'remix-utils/client-only'
+import { Banner } from '../../../banner'
 import { Socials } from '../../../socials'
 import { NavItem } from './nav-item'
 import { MobileNavItem } from './nav-item-mobile'
@@ -29,6 +30,11 @@ interface NavbarProps {
     link: string
   }[]
   logo: string
+  banner: {
+    name: string
+    link: string
+    media: Media
+  }
   socials: {
     name: string
     link: string
@@ -41,6 +47,7 @@ interface NavbarProps {
 export function NavbarPresenter({
   links,
   logo,
+  banner,
   socials,
   hamburger,
   cross,
@@ -59,6 +66,9 @@ export function NavbarPresenter({
           className="transition-transform duration-300 hover:scale-[1.2] relative z-[60]"
         />
       </Link>
+
+      <Banner banner={banner} className="hidden md:flex" />
+
       <NavigationMenu className="hidden md:block">
         <NavigationMenuList className="gap-x-10">
           {links.map(({ name, link }, index) => (