Marthas changes

src/components/FetchData.tsx

@@ -13,7 +13,6 @@ interface PathNameProps {
 }
 
 export default function Index({ pathname }: PathNameProps) {
-  console.log("pathname in FetchData:>> ", pathname);
   const myHeaders = new Headers();
   myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
 
@@ -28,12 +27,11 @@ export default function Index({ pathname }: PathNameProps) {
   };
   const fetcher = (url: string) =>
     fetch(url, requestOptions).then((res) => {
-      // console.log("res :>> ", res.json());
       return res.json();
     });
 
   const { data, error } = useSWR("/api/staticdata", fetcher);
-  console.log("data :>> ", data);
+  // console.log("data :>> ", data);
 
   if (error) return <div>Failed to load</div>;
   if (!data) return <div>Loading...</div>;

src/components/Navbar.tsx

@@ -1,4 +1,3 @@
-
 // import Link from "next/link";
 // import { useState } from "react";
 // //  import homeicon from "../../public/homeicon.png"
@@ -36,7 +35,7 @@
 //             >
 //               {/* <Image src={homeicon} alt="Homepage Icon" className="icon" width={24} height={24} style={{ marginRight: "0.5rem" }} /> */}
 //                     Homepage
-          
+
 //             </span>
 //           </Link>
 //         </div>
@@ -168,12 +167,10 @@
 
 // export default NavBar;
 
+//!NEW NAVBAR:
 
-//!NEW NAVBAR: 
-
-
-import { useState } from 'react';
-import Link from 'next/link';
+import { useState } from "react";
+import Link from "next/link";
 
 const DropdownMenu = () => {
   const [isDropdownOpen, setDropdownOpen] = useState(false);
@@ -190,7 +187,7 @@ const DropdownMenu = () => {
         aria-haspopup="true"
         aria-expanded={isDropdownOpen}
       >
-        Techskills{' '}
+        Techskills{" "}
         <svg
           className="w-2.5 h-2.5 ml-2.5"
           aria-hidden="true"
@@ -215,7 +212,10 @@ const DropdownMenu = () => {
           aria-orientation="vertical"
           aria-labelledby="dropdownMenuButton"
         >
-          <div className="py-2 text-sm text-gray-700 dark:text-gray-400" role="none">
+          <div
+            className="py-2 text-sm text-gray-700 dark:text-gray-400"
+            role="none"
+          >
             <Link href="/techskills/html">
               <button
                 role="menuitem"
@@ -248,6 +248,13 @@ const DropdownMenu = () => {
                 React
               </button>
             </Link>
+            <Link
+              href="/techskills/advanced-react"
+              role="menuitem"
+              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              Advanced React
+            </Link>
             {/* Add other links here */}
           </div>
         </div>
@@ -262,12 +269,7 @@ const Navbar = () => (
       <div className="flex items-center">
         {/* Link to the homepage */}
         <Link href="/"></Link>
-        <img
-          src="http://www.w3.org/2000/svg" 
-
-          className="h-8 mr-3"
-          alt="Logo"
-        />
+        <img src="http://www.w3.org/2000/svg" className="h-8 mr-3" alt="Logo" />
         <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
           SLAAAAY
         </span>
@@ -296,11 +298,12 @@ const Navbar = () => (
         </svg>
       </button>
       <div className="hidden w-full md:block md:w-auto" id="navbar-dropdown">
-        <ul
-          className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
-        >
+        <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
           <li>
-            <div className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">
+            <div
+              className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent"
+              aria-current="page"
+            >
               Home
             </div>
           </li>
@@ -313,7 +316,7 @@ const Navbar = () => (
             {/* Use the DropdownMenu component for the dropdown */}
             <DropdownMenu />
           </li>
-        
+
           {/* <li>
             <div className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
               Contact

src/components/Questionblock.tsx

@@ -10,7 +10,7 @@ export default function Questionblock({ questionx }: Props) {
   const revealAnswer = () => {
     setAnswerVisible(true);
   };
-  // console.log("id :>> ", question);
+
   const { id, question, answer } = questionx;
   return (
     <div className="border px-3 py-4 ">

src/pages/softskills.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import FetchData from "@/components/FetchData";
 
-export default function Section() {
+export default function Softskills() {
   const language: string = "softskills";
-  console.log("language :>> ", language);
 
   return (
     <div>

src/pages/techskills/[section].tsx

@@ -1,12 +1,54 @@
 import React from "react";
 import FetchData from "@/components/FetchData";
 import { useRouter } from "next/router";
+import { GetStaticProps, GetStaticPaths } from "next";
+
+interface PageType {
+  // only sting for urlquery or array from the fetch?
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const prefetchedPages = [
+    "html",
+    "css",
+    "javascript",
+    "react",
+    "advanced-react",
+  ];
+  const paths = prefetchedPages.map((prefetchedPage) => {
+    return { params: { section: prefetchedPage } };
+  });
+  // console.log("paths :>> ", paths);
+  return {
+    paths: [paths],
+    fallback: false,
+  };
+};
+
+// this page doesn't receive props, only later they will be fetched
+export const getStaticProps: GetStaticProps<PageType> = async (context) => {
+  // no fetch in this component, only render other component
+
+  // // Rauls code:
+  //   // console.log("context :>> ", context);
+  //   console.log("getProps");
+  //   const productId = context.params?.productId;
+
+  //   const response = await fetch(
+  //     `https://fakestoreapi.com/products/${context}`
+  //   );
+  //   const result: ProductType = await response.json();
+  //   //   console.log("result :>> ", result);
+
+  return {
+    // props: what?
+  };
+};
 
 export default function Section() {
   const params = useRouter();
-  console.log("params :>> ", params);
+
   const language: any = params.query.section;
-  console.log("language :>> ", language);
 
   return (
     <div>