From 9492cacecfaa95ebd5b090a6e6c95b68c8718332 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 30 Oct 2022 15:25:39 +0800
Subject: [PATCH] [portal] enable customization of product logo

---
 .../portal/src/components/global/AppShell.tsx |  3 +++
 .../components/global/MobileNavigation.tsx    | 14 +++++++----
 .../components/global/ProductNavigation.tsx   | 23 ++++++++++++-------
 ...fersNavigation.ts => OffersNavigation.tsx} |  8 +++++++
 4 files changed, 35 insertions(+), 13 deletions(-)
 rename apps/portal/src/components/offers/{OffersNavigation.ts => OffersNavigation.tsx} (71%)

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index fbdfa6aa..41e943d4 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/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}
                   />
diff --git a/apps/portal/src/components/global/MobileNavigation.tsx b/apps/portal/src/components/global/MobileNavigation.tsx
index 0bda8bfd..af13aab9 100644
--- a/apps/portal/src/components/global/MobileNavigation.tsx
+++ b/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">
diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
index 6b6b857c..aeff5e80 100644
--- a/apps/portal/src/components/global/ProductNavigation.tsx
+++ b/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">
diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.tsx
similarity index 71%
rename from apps/portal/src/components/offers/OffersNavigation.ts
rename to apps/portal/src/components/offers/OffersNavigation.tsx
index 68f84113..5530a01f 100644
--- a/apps/portal/src/components/offers/OffersNavigation.ts
+++ b/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',