@@ -97,7 +103,7 @@ const RecordPage = () => {
className={`ml-auto p-2 px-4 border-2 rounded-lg mt-2 ${
isListening
? "border-green-600 bg-green-100 text-green-700 cursor-not-allowed"
- : "border-black hover:bg-black hover:text-white"
+ : "border-black hover:bg-black hover:text-white cursor-pointer"
} ${isListening ? "bg-green-200" : ""}`}
onClick={!isListening ? handleSubmit : undefined}
>
@@ -117,4 +123,3 @@ const RecordPage = () => {
};
export default RecordPage;
-
From d4259b25e005f4add53296df707c1722afb6d62d Mon Sep 17 00:00:00 2001
From: Zavista <84294353+Zavista@users.noreply.github.com>
Date: Sun, 15 Sep 2024 02:10:13 -0400
Subject: [PATCH 2/2] added dropdown
---
frontend/src/components/Dropdown.tsx | 80 ++++++++++++++++++++++++++++
frontend/src/components/Navbar.tsx | 35 ++----------
2 files changed, 83 insertions(+), 32 deletions(-)
create mode 100644 frontend/src/components/Dropdown.tsx
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
new file mode 100644
index 0000000..5f8b110
--- /dev/null
+++ b/frontend/src/components/Dropdown.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { CiMenuBurger } from "react-icons/ci";
+import { logout } from "./Auth";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+type DropdownProps = {
+ email?: string | null;
+};
+
+function getUsernameFromEmail(email: string): string {
+ const atIndex = email.indexOf("@");
+
+ if (atIndex !== -1) {
+ return email.substring(0, atIndex);
+ }
+
+ return email;
+}
+
+const Dropdown = ({ email }: DropdownProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const handleClick = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const navigate = useNavigate();
+
+ const handleLogout = async () => {
+ try {
+ await logout(navigate);
+ toast.success("Logged out successfully", {
+ autoClose: 1000,
+ hideProgressBar: true,
+ position: "bottom-left",
+ });
+
+ console.log("Logged out successfully");
+ } catch (error) {
+ toast.error("Logged out successfully", {
+ autoClose: 1000,
+ hideProgressBar: true,
+ position: "bottom-left",
+ });
+ console.error("Logout failed", error);
+ }
+ };
+
+ return (
+
+
+
+ {isOpen && (
+
+
+
+
+ {email ? getUsernameFromEmail(email) : "not logged in"}
+
+
+
+ {/* Logout option */}
+
+ Log Out
+
+
+
+ )}
+
+ );
+};
+
+export default Dropdown;
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index a63ab06..9020898 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,9 +1,7 @@
-import React from "react";
import { Link } from "react-router-dom";
import verbatex from "../assets/verbatex.png";
-import { logout } from "./Auth";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
+import Dropdown from "./Dropdown";
+import { auth } from "../firebase";
type NavbarProps = {
title: string;
@@ -11,28 +9,6 @@ type NavbarProps = {
};
const Navbar = ({ title, location }: NavbarProps) => {
- const navigate = useNavigate();
-
- const handleLogout = async () => {
- try {
- await logout(navigate);
- toast.success("Logged out successfully", {
- autoClose: 1000,
- hideProgressBar: true,
- position: "bottom-left",
- });
-
- console.log("Logged out successfully");
- } catch (error) {
- toast.error("Logged out successfully", {
- autoClose: 1000,
- hideProgressBar: true,
- position: "bottom-left",
- });
- console.error("Logout failed", error);
- }
- };
-
return (
<>
@@ -73,12 +49,7 @@ const Navbar = ({ title, location }: NavbarProps) => {
>
Favourites
-
- Log Out
-
+