refactor(scaffolding): cleaning up, add ts aliases, switch to pages b…

…ased router, basic navbar

.gitignore

@@ -12,6 +12,9 @@
 /.next/
 /out/
 
+.next
+.trunk
+
 # production
 /build
 

package.json

@@ -15,10 +15,11 @@
     "autoprefixer": "10.4.16",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.2",
-    "next": "13.5.2",
+    "next": "13.4.19",
     "postcss": "8.4.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   }

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,106 @@
+"use client";
+import { useCallback, useState } from "react";
+
+import Link from "next/link";
+import { IconContext } from "react-icons";
+import { FaGem, FaBars, FaMagnifyingGlass, FaX } from "react-icons/fa6";
+
+export const Navbar = () => {
+  const [open, setOpen] = useState(false);
+
+  const toggleOpen = useCallback(() => {
+    setOpen(!open);
+  }, [open]);
+
+  // TODO: Open navbar and focus on search bar
+  const onSearchClick = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  return (
+    <div className="bg-[#2b2b2b]">
+      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+        <div className="relative flex h-16 items-center justify-between">
+          <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+            {/* Mobile menu button*/}
+            <button
+              className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+              onClick={toggleOpen}
+            >
+              {open ? (
+                <FaX className="block h-6 w-6" aria-hidden="true" />
+              ) : (
+                <FaBars className="block h-6 w-6" aria-hidden="true" />
+              )}
+            </button>
+            <button
+              className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+              onClick={onSearchClick}
+            >
+              <FaMagnifyingGlass className="block h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+            <div className="flex flex-shrink-0 items-center">
+              <Link href="/">
+                {/* <Image WE CAN SHOW AN IMAGE LOGO TOO
+                                    className="h-8 w-auto"
+                                    src={Logo}
+                                    alt="Your Company"
+                                /> */}
+                <IconContext.Provider value={{ size: "32", color: "#FF89A9" }}>
+                  <FaGem />
+                </IconContext.Provider>
+              </Link>
+            </div>
+            <div className="hidden sm:ml-6 sm:block">
+              <div className="flex space-x-4">
+                {/* UNCOMMENT TO SHOW NAVIGATION ITEMS */}
+                {/* {navigation.map(item => (
+                                    <a
+                                        key={item.name}
+                                        href={item.href}
+                                        className={classNames(
+                                            item.current
+                                                ? "bg-gray-900 text-white"
+                                                : "text-gray-300 hover:bg-gray-700 hover:text-white",
+                                            "rounded-md px-3 py-2 text-sm font-medium",
+                                        )}
+                                        aria-current={
+                                            item.current ? "page" : undefined
+                                        }>
+                                        {item.name}
+                                    </a>
+                                ))} */}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {open && (
+        <div className="sm:hidden">
+          <div className="space-y-1 px-2 pb-3 pt-2">
+            {/* UNCOMMENT TO SHOW NAVIGATION ITEMS */}
+            {/*  {navigation.map(item => (
+                            <a
+                                key={item.name}
+                                href={item.href}
+                                className={classNames(
+                                    item.current
+                                        ? "bg-gray-900 text-white"
+                                        : "text-gray-300 hover:bg-gray-700 hover:text-white",
+                                    "block rounded-md px-3 py-2 text-base font-medium",
+                                )}
+                                aria-current={
+                                    item.current ? "page" : undefined
+                                }>
+                                {item.name}
+                            </a>
+                        ))} */}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/Navbar/index.ts

@@ -0,0 +1 @@
+export * from "./Navbar"

src/components/index.ts

@@ -0,0 +1 @@
+export * from "./Navbar"

src/pages/_app.tsx

@@ -0,0 +1,13 @@
+"use client";
+import "../styles/global.css";
+import type { AppProps } from "next/app";
+import { Navbar } from "../components";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Navbar />
+      <Component {...pageProps} />
+    </>
+  );
+}

src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

src/pages/index.tsx

@@ -0,0 +1,15 @@
+// Use inter from next/font
+import { Inter } from "next/font/google";
+import { Suspense } from "react";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function Home() {
+  return (
+    <main className={inter.className}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <></>
+      </Suspense>
+    </main>
+  );
+}

tsconfig.json

@@ -18,8 +18,13 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["src/pages/*"],
+      "@components/*": ["src/components/*"],
+      "@styles/*": ["src/styles/*"],
+      "@utils/*": ["src/utils/*"],
+      "@hooks/*": ["src/hooks/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],