-
+
-)
+ );
-// return (
-// (true);
+ const modalRef = useRef(null);
+
+ useEffect(() => {
+ if (isOpen) setIsLogin(true);
+ }, [isOpen]);
+
+ if (!isOpen) return null;
+
+ const handleOverlayClick = (e: MouseEvent) => {
+ if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+ onClose();
+ }
+ };
+
+ const handleSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+ const formData = new FormData(e.currentTarget);
+ const email = formData.get("email") as string;
+ const password = formData.get("password") as string;
+ const name = isLogin ? undefined : (formData.get("name") as string);
+
+ const endpoint = isLogin ? "/api/login" : "/api/signup";
+ const body = isLogin ? { email, password } : { name: name!, email, password };
+
+ try {
+ const res = await fetch(endpoint, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body),
+ });
+ if (res.ok) {
+ console.log("Success!");
+ onClose();
+ } else {
+ console.error("Error:", await res.text());
+ }
+ } catch (error) {
+ console.error("Request failed:", error instanceof Error ? error.message : String(error));
+ }
+ };
+
+ return (
+ (null);
+ const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
+ // const navOptions = useMemo(() => ["Earthquakes"], []);
+ const aboutDropdown = ["Our Mission", "The Team", "Contact Us"];
+ const [isModalOpen, setIsModalOpen] = useState(false);
- useEffect(() => {
- const handleClickOutside = (event: MouseEvent) => {
- if (
- dropdownRef.current &&
- !dropdownRef.current.contains(event.target as Node)
- ) {
- setIsDropdownOpen(false);
- }
- };
-
- const handleEscapeKey = (event: KeyboardEvent) => {
- if (event.key === "Escape") {
- setIsDropdownOpen(false);
- }
- };
-
- document.addEventListener("mousedown", handleClickOutside);
- document.addEventListener("keydown", handleEscapeKey);
-
- return () => {
- document.removeEventListener("mousedown", handleClickOutside);
- document.removeEventListener("keydown", handleEscapeKey);
- };
- }, []);
-
- return (
-
-
-
-
-
+ return (
+
-
+
+
+
+
+
+
+
+
+ {["Earthquake 1", "Earthquake 2", "Earthquake 3"].map((name) => (
+
+
+
+ ))}
+ {name}
+ +Spacer
+Spacer
-//
-//
+ //
+ //
+ // );
}
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index fd4f8cb..98fd4cc 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,10 +1,7 @@
-import Navbar from "@/components/navbar";
-
export default function Shop() {
- return (
- -
-//
-
-// Get started by editing{" "}
-//
-// src/app/page.tsx -//-// . -//
-// - Save and see your changes instantly. -//
+ //
+ //
-//
-//
-// );
+ // -
+ //
-
+ // Get started by editing{" "}
+ //
+ // src/app/page.tsx + //+ // . + //
+ // - Save and see your changes instantly. + //
-//
-//
-//
+ //
+ //
+ //
-
- )
-}
\ No newline at end of file
+ return (
+ Shop
-
+
+ );
+}
diff --git a/src/app/user/page.tsx b/src/app/user/page.tsx
index 51bbe92..908e803 100644
--- a/src/app/user/page.tsx
+++ b/src/app/user/page.tsx
@@ -1,10 +1,7 @@
-import Navbar from "@/components/navbar";
-
export default function User() {
- return (
- Shop
+
-
- )
-}
\ No newline at end of file
+ return (
+ User
-
+
+ );
+}
diff --git a/src/app/warehouse/page.tsx b/src/app/warehouse/page.tsx
index 9b3272d..fdf01a0 100644
--- a/src/app/warehouse/page.tsx
+++ b/src/app/warehouse/page.tsx
@@ -1,10 +1,7 @@
-import Navbar from "@/components/navbar";
-
export default function Warehouse() {
- return (
- User
+
-
- )
-}
\ No newline at end of file
+ return (
+ Warehouse
-
+
+ );
+}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
new file mode 100644
index 0000000..bf2843a
--- /dev/null
+++ b/src/components/AuthModal.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useState, FormEvent, useRef, MouseEvent, useEffect } from "react";
+
+interface AuthModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export default function AuthModal({ isOpen, onClose }: AuthModalProps) {
+ const [isLogin, setIsLogin] = useStateWarehouse
+
+
+ );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index ec645a7..24772b8 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,96 +1,71 @@
-"use client"
+"use client";
+import { useState } from "react";
-import Image from "next/image";
+import AuthModal from "@/components/AuthModal";
+import { usePathname } from "next/navigation";
import Link from "next/link";
-import { usePathname } from 'next/navigation'
-import { useState, useEffect, useRef } from "react";
+import Image from "next/image";
+import { useMemo } from "react";
+import { FaRegUserCircle } from "react-icons/fa";
+
+function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
+ const pathname = usePathname();
+ const isActive = dropdownItems ? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`) : pathname === href;
+
+ return (
+
+ );
+}
export default function Navbar() {
- const [isDropdownOpen, setIsDropdownOpen] = useState(false);
- const pathname = usePathname()
- const dropdownRef = useRef
+
+
+ {isLogin ? "Login" : "Sign Up"}
+ + {/* Form */} + + ++ {isLogin ? "Need an account?" : "Already have an account?"}{" "} + +
+
-
- );
+ return (
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- {isDropdownOpen && (
-
-
-
- )}
- -
-
- Our Mission -
- The Team -
- Contact Us -
-
- - - User - -
-
+ setIsModalOpen(false)} />
+
+ );
}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..55d23f5
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+
+ {navOptions.map((name) => (
+
+
+
+