[portal] enable customization of product logo

apps/portal/src/components/global/AppShell.tsx

@@ -108,6 +108,7 @@ export default function AppShell({ children }: Props) {
 
   const currentProductNavigation: Readonly<{
     googleAnalyticsMeasurementID: string;
+    logo?: React.ReactNode;
     navigation: ProductNavigationItems;
     showGlobalNav: boolean;
     title: string;
@@ -173,6 +174,7 @@ export default function AppShell({ children }: Props) {
         <MobileNavigation
           globalNavigationItems={GlobalNavigation}
           isShown={mobileMenuOpen}
+          logo={currentProductNavigation.logo}
           productNavigationItems={currentProductNavigation.navigation}
           productTitle={currentProductNavigation.title}
           setIsShown={setMobileMenuOpen}
@@ -192,6 +194,7 @@ export default function AppShell({ children }: Props) {
                 <div className="flex flex-1 items-center">
                   <ProductNavigation
                     items={currentProductNavigation.navigation}
+                    logo={currentProductNavigation.logo}
                     title={currentProductNavigation.title}
                     titleHref={currentProductNavigation.titleHref}
                   />

apps/portal/src/components/global/MobileNavigation.tsx

@@ -11,6 +11,7 @@ import type { ProductNavigationItems } from './ProductNavigation';
 type Props = Readonly<{
   globalNavigationItems: GlobalNavigationItems;
   isShown?: boolean;
+  logo?: React.ReactNode;
   productNavigationItems: ProductNavigationItems;
   productTitle: string;
   setIsShown: (isShown: boolean) => void;
@@ -19,6 +20,7 @@ type Props = Readonly<{
 export default function MobileNavigation({
   globalNavigationItems,
   isShown,
+  logo,
   productNavigationItems,
   productTitle,
   setIsShown,
@@ -69,11 +71,13 @@ export default function MobileNavigation({
               </Transition.Child>
               <div className="flex flex-shrink-0 items-center px-4">
                 <Link href="/">
-                  <img
-                    alt="Tech Interview Handbook"
-                    className="h-8 w-auto"
-                    src="/logo.svg"
-                  />
+                  {logo ?? (
+                    <img
+                      alt="Tech Interview Handbook"
+                      className="h-8 w-auto"
+                      src="/logo.svg"
+                    />
+                  )}
                 </Link>
               </div>
               <div className="mt-5 h-0 flex-1 overflow-y-auto px-2">

apps/portal/src/components/global/ProductNavigation.tsx

@@ -17,11 +17,17 @@ export type ProductNavigationItems = ReadonlyArray<NavigationItem>;
 
 type Props = Readonly<{
   items: ProductNavigationItems;
+  logo?: React.ReactNode;
   title: string;
   titleHref: string;
 }>;
 
-export default function ProductNavigation({ items, title, titleHref }: Props) {
+export default function ProductNavigation({
+  items,
+  logo,
+  title,
+  titleHref,
+}: Props) {
   const router = useRouter();
 
   return (
@@ -29,13 +35,14 @@ export default function ProductNavigation({ items, title, titleHref }: Props) {
       <Link
         className="hover:text-primary-700 flex items-center gap-2 text-base font-medium"
         href={titleHref}>
-        {titleHref !== '/' && (
-          <img
-            alt="Tech Interview Handbook"
-            className="h-8 w-auto"
-            src="/logo.svg"
-          />
-        )}
+        {titleHref !== '/' &&
+          (logo ?? (
+            <img
+              alt="Tech Interview Handbook"
+              className="h-8 w-auto"
+              src="/logo.svg"
+            />
+          ))}
         {title}
       </Link>
       <div className="hidden h-full items-center space-x-8 md:flex">

apps/portal/src/components/offers/OffersNavigation.tsx

@@ -1,3 +1,5 @@
+import { CurrencyDollarIcon } from '@heroicons/react/24/outline';
+
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
@@ -8,6 +10,12 @@ const navigation: ProductNavigationItems = [
 const config = {
   // TODO: Change this to your own GA4 measurement ID.
   googleAnalyticsMeasurementID: 'G-DBLZDQ2ZZN',
+  logo: (
+    <CurrencyDollarIcon
+      aria-label="Tech Interview Handbook Offers"
+      className="h-8 w-8"
+    />
+  ),
   navigation,
   showGlobalNav: false,
   title: 'Tech Offers Repo',