Merge pull request #20 from LoveYourself999/main

adding router

Author: rootfs

src/component/Layout.js

@@ -0,0 +1,16 @@
+import Navbar from "./Navbar";
+import Sidebar from "./Sidebar";
+
+const Layout = ({ children }) => {
+    return(
+        <div style={{ backgroundColor: '#F0F8FF' }}>
+        <Sidebar />
+        <main className="flex-grow ml-64 relative">
+          <Navbar />
+          {children}
+        </main>
+      </div>
+    )
+}
+
+export default Layout;

src/component/Navbar.js

@@ -0,0 +1,18 @@
+const Navbar = () => {
+  return (
+    <>
+      <nav className="flex justify-between items-center px-4 py-2">
+        <div className="flex-grow">
+          <input
+            type="text"
+            className="w-3/4 bg-white text-black-200 px-4 py-2 rounded-md"
+            placeholder="Search..."
+          />
+        </div>
+        <div className="flex items-center"></div>
+      </nav>
+    </>
+  );
+};
+
+export default Navbar;

src/component/Sidebar.js

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import Papa from 'papaparse';
+import { useRouter } from 'next/router';
+
+const Sidebar = () => {
+  const router = useRouter();
+  // State to track the selected button, conference data, and dropdown visibility
+  const [selectedButton, setSelectedButton] = useState(null);
+  const [conferences, setConferences] = useState([]);
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+
+  // Function to handle button click and update selectedButton state
+  const handleButtonClick = (buttonName) => {
+    setSelectedButton(buttonName);
+    router.push('/');
+    if (buttonName === 'conference') {
+      // Toggle dropdown visibility
+      setDropdownVisible(!dropdownVisible);
+      // If "Conference" button is clicked, fetch and set conference data
+      if (!dropdownVisible) {
+        fetchConferences();
+      }
+    } else {
+      // Hide dropdown if another button is clicked
+      setDropdownVisible(false);
+    }
+  };
+
+  // Function to fetch conference data from CSV file
+  const fetchConferences = () => {
+    fetch('https://raw.githubusercontent.com/cncf-tags/cloud-native-ai/main/cncf-youtube-channel-summarizer/data/sample_cncf_video_summary.csv')
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.text();
+      })
+      .then((text) => {
+        // Parse CSV data using PapaParse and extract 'conference_name' column
+        Papa.parse(text, {
+          header: true,
+          skipEmptyLines: true,
+          complete: (result) => {
+            const uniqueConferences = new Set();
+            const conferencesData = result.data.reduce((acc, row) => {
+              const name = row['conference_name'].trim();
+              if (!uniqueConferences.has(name)) {
+                uniqueConferences.add(name);
+                acc.push({ name });
+              }
+              return acc;
+            }, []);
+            setConferences(conferencesData);
+          },
+        });
+      })
+      .catch((error) => {
+        console.error('Error fetching conference data:', error);
+      });
+  };
+
+  // Function to handle click on dropdown button
+  const handleDropdownButtonClick = () => {
+    // Navigate to the new page when dropdown button is clicked
+    router.push('/conferences/NewPage');
+  };
+
+  return (
+    <>
+      <aside className="fixed top-0 left-0 w-64 h-full" aria-label="Sidenav">
+        <div className="overflow-y-auto py-5 px-3 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+          <ul className="space-y-2">
+            <li>
+              <a href="#" className={`flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 ${selectedButton === 'dashboard' ? 'bg-blue-500 text-black' : ''}`} onClick={() => handleButtonClick('dashboard')}>
+                <span className="ml-3">Dashboard</span>
+              </a>
+            </li>
+            <li>
+              <button type="button" className={`flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 ${selectedButton === 'conference' ? 'bg-blue-500 text-black' : ''}`} onClick={() => handleButtonClick('conference')}>
+                <span className="flex-1 ml-3 text-left whitespace-nowrap">Conference</span>
+                <svg aria-hidden="true" className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd"></path></svg> 
+              </button>
+              {/* Render conference list if the "Conference" button is selected and dropdown is visible */}
+              {selectedButton === 'conference' && dropdownVisible && (
+                <ul className="pl-6 mt-2">
+                  {/* Render conference items */}
+                  {conferences.map((conference, index) => (
+                    <li key={index} className="py-1">
+                      <button type="button" className="text-left text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 w-full p-1 rounded-lg transition" onClick={handleDropdownButtonClick}>
+                        {conference.name}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          </ul>
+        </div>
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;

src/pages/_app.js

@@ -1,5 +1,10 @@
 import "@/styles/globals.css";
+import Layout from '../component/Layout';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
+  return (
+  <Layout>
+    <Component {...pageProps} />
+  </Layout>
+  )
+}

src/pages/conferences/[conference].js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const NewPage = () => {
+  return (
+    <div style={{ backgroundColor: '#F0F8FF' }}>
+        <h1>This is the page for a conference</h1>
+        {/* Add the content you want to display on the new page here */}
+    </div>
+  );
+};
+
+export default NewPage;

src/pages/conferences/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const conferences = () => {
+
+  return (
+    <div style={{ backgroundColor: '#F0F8FF' }}>
+        <h1>This is the home page for all conferences</h1>
+        {}
+    </div>
+  );
+};
+
+export default conferences;

src/pages/index.js

@@ -1,5 +1,3 @@
-import Sidebar from './Sidebar'
-import Navbar from './Navbar'
 import { useEffect, useState } from 'react';
 import ForceGraph from './force-graph';
 const Home = () => {
@@ -12,10 +10,8 @@ const Home = () => {
   }, []);
 
   return (
-    <div style={{ backgroundColor: '#F0F8FF' }}> {/* Changed background color to light gray */}
-      <Sidebar />
+    <div style={{ backgroundColor: '#F0F8FF' }}>
       <main className="flex-grow ml-64 relative">
-        <Navbar />
         {data && <ForceGraph data={data} src="/conference-dashboard"/>}
       </main>
     </div>