From 95e6fda526f5d3663d5a1fd2a470ae8bba31ebf2 Mon Sep 17 00:00:00 2001
From: Dhruvan Ganadhandayuthapani <dhruvan2006@gmail.com>
Date: Wed, 11 Sep 2024 17:51:45 +0200
Subject: [PATCH] Notebook frontend

---
 frontend/src/app/Navbar.tsx                | 67 +++++++++++++++++++++-
 frontend/src/app/notebooks/[name]/page.tsx | 28 +++++++++
 2 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/notebooks/[name]/page.tsx

diff --git a/frontend/src/app/Navbar.tsx b/frontend/src/app/Navbar.tsx
index c4d9752..f9f49b7 100644
--- a/frontend/src/app/Navbar.tsx
+++ b/frontend/src/app/Navbar.tsx
@@ -26,10 +26,16 @@ interface DataSource {
   description: string;
 }
 
+interface Notebook {
+  name: string;
+  url_name: string;
+}
+
 export default function Navbar() {
   // Handle dropdowns logic
   const [isIndicatorDropdownOpen, setIsIndicatorDropdownOpen] = useState(false);
   const [isDataSourceDropdownOpen, setIsDataSourceDropdownOpen] = useState(false);
+  const [isNotebookDropdownOpen, setIsNotebookDropdownOpen] = useState(false);
 
   const handleIndicatorMouseEnter = () => setIsIndicatorDropdownOpen(true);
   const handleIndicatorMouseLeave = (e: React.MouseEvent) => {
@@ -47,6 +53,14 @@ export default function Navbar() {
     }
   };
 
+  const handleNotebookMouseEnter = () => setIsNotebookDropdownOpen(true);
+  const handleNotebookMouseLeave = (e: React.MouseEvent) => {
+    const relatedTarget = e.relatedTarget as Element;
+    if (!relatedTarget || !(relatedTarget instanceof Element) || !relatedTarget.closest('.notebook-dropdown-area')) {
+      setIsNotebookDropdownOpen(false);
+    }
+  };
+
   // Fetch indicators data
   const [indicators, setIndicators] = useState<CategoryWithIndicators[]>([]);
   const [indicatorsIsLoading, setIndicatorsIsLoading] = useState(true);
@@ -93,6 +107,9 @@ export default function Navbar() {
     fetchCategories();
   }, []);
 
+  // Notebooks data
+  const notebooks: Notebook[] = [{name: 'Thermocap Multiple', url_name: 'thermocap-multiple'}, {name: 'Bitcoin Decay Channel', url_name: 'bitcoin-decay-channel'}]
+
   return (
     <header className='bg-[#fff]/75 backdrop-blur-md text-[#191919] flex flex-col font-sans fixed top-0 left-0 right-0 z-50 border-b border-zinc-300'>
       <nav className='container mx-auto px-4 sm:px-8 lg:px-16'>
@@ -112,7 +129,7 @@ export default function Navbar() {
             </li>
 
             <li 
-              className='py-6 px-6'
+              className='py-6 pl-6'
               onMouseEnter={handleIndicatorMouseEnter} 
               onMouseLeave={handleIndicatorMouseLeave}
             >
@@ -131,7 +148,7 @@ export default function Navbar() {
             </li>
 
             <li 
-              className='py-6'
+              className='py-6 pl-6'
               onMouseEnter={handleDataSourceMouseEnter} 
               onMouseLeave={handleDataSourceMouseLeave}
             >
@@ -148,6 +165,26 @@ export default function Navbar() {
                 </svg>
               </div>
             </li>
+
+            <li 
+              className='py-6 pl-6'
+              onMouseEnter={handleNotebookMouseEnter} 
+              onMouseLeave={handleNotebookMouseLeave}
+            >
+              <div className='focus:outline-none hover:text-[#7f7f7f] transition duration-100 flex items-center cursor-pointer'>
+                {/* TODO: Add this page.tsx */}
+                <Link href="#">Research Notebooks</Link>
+
+                <svg
+                  className={`ml-1 mt-0.5 h-4 w-4 transition-transform duration-200 ${isNotebookDropdownOpen ? 'rotate-180' : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </li>
           </ul>
 
           {/* Login Button */}
@@ -216,6 +253,32 @@ export default function Navbar() {
               )}
             </div>
           </div>
+
+          {/* Notebook Dropdown */}
+          <div 
+            className={`notebook-dropdown-area ${isNotebookDropdownOpen ? 'transition-all duration-200 ease-in-out pb-5 opacity-100 max-h-[500px]' : 'opacity-0 max-h-0 overflow-hidden'}`}
+            onMouseEnter={handleNotebookMouseEnter}
+            onMouseLeave={handleNotebookMouseLeave}
+          >
+            <div className='container flex mx-auto p-4'>
+              {dataSourcesIsLoading ? (
+                <div className="text-center w-full">Loading...</div>
+              ) : (
+                <div className='flex-1 px-4'>
+                  <h2 className='text-sm text-[#7f7f7f] mb-3'>Research Notebooks</h2>
+                  <ul className='mt-2 space-y-2'>
+                  {notebooks.map((notebook, idx) => (
+                      <li key={idx}>
+                      <Link href={`/notebooks/${notebook.url_name}`} className='hover:text-[#7f7f7f] transition duration-100'>
+                          {notebook.name}
+                      </Link>
+                      </li>
+                  ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
         </div>
       </nav>
     </header>
diff --git a/frontend/src/app/notebooks/[name]/page.tsx b/frontend/src/app/notebooks/[name]/page.tsx
new file mode 100644
index 0000000..c590c4b
--- /dev/null
+++ b/frontend/src/app/notebooks/[name]/page.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { notFound } from "next/navigation";
+
+async function fetchHtml(name: string) {
+  const res = await fetch(`https://api.gnanadhandayuthapani.com/api/research/notebooks/${name}`);
+
+  return res.text();
+}
+
+export default async function NotebookPage({ params }: { params: { name: string } }) {
+  const { name } = params;
+  const htmlContent = await fetchHtml(name);
+
+  return (
+    <div>
+        <iframe
+          srcDoc={htmlContent}
+          style={{
+            width: '100%',
+            height: '100vh',
+            border: 'none',
+            overflow: 'auto',
+          }}
+          sandbox="allow-scripts allow-same-origin"
+        />
+      </div>
+  );
+}