From b9b740a49da7c4a68a13af643aafda638eafda46 Mon Sep 17 00:00:00 2001 From: Jerome Date: Thu, 13 Jul 2023 13:45:27 -0400 Subject: [PATCH] fix bugs --- public/{profilePic.jpg => profile.jpg} | Bin src/Components/Buttons/Button.tsx | 4 +- src/Components/Icons/Icons.tsx | 2 + src/Components/Icons/Menu.tsx | 18 ++ src/Components/Icons/Search.tsx | 17 ++ src/Components/Layout.tsx | 37 ++-- src/Components/Navbar.tsx | 273 ++++++++++++------------- src/Components/Sidebar.tsx | 20 +- 8 files changed, 203 insertions(+), 168 deletions(-) rename public/{profilePic.jpg => profile.jpg} (100%) create mode 100644 src/Components/Icons/Menu.tsx create mode 100644 src/Components/Icons/Search.tsx diff --git a/public/profilePic.jpg b/public/profile.jpg similarity index 100% rename from public/profilePic.jpg rename to public/profile.jpg diff --git a/src/Components/Buttons/Button.tsx b/src/Components/Buttons/Button.tsx index 70049fe..65c62b8 100644 --- a/src/Components/Buttons/Button.tsx +++ b/src/Components/Buttons/Button.tsx @@ -20,8 +20,9 @@ const Button: FC = ({ variant = "primary", size = "md", disabled, - href, className = "", + + href, ...props }) => { const sizeClasses = { @@ -43,6 +44,7 @@ const Button: FC = ({ const buttonClasses = [ className, + "font-semibold", "rounded-lg", sizeClasses[size], diff --git a/src/Components/Icons/Icons.tsx b/src/Components/Icons/Icons.tsx index 3f6b8ce..9aa28cb 100644 --- a/src/Components/Icons/Icons.tsx +++ b/src/Components/Icons/Icons.tsx @@ -22,6 +22,8 @@ export { default as Edit } from "./Edit"; export { default as Upload } from "./Upload"; export { default as Trash } from "./Trash"; export { ChevronUp, ChevronDown } from "./Chevron"; +export { default as Search } from "./Search"; +export { default as Menu } from "./Menu"; export { GreenPlay, GreenHorn, diff --git a/src/Components/Icons/Menu.tsx b/src/Components/Icons/Menu.tsx new file mode 100644 index 0000000..650cb11 --- /dev/null +++ b/src/Components/Icons/Menu.tsx @@ -0,0 +1,18 @@ +export default function Menu(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/src/Components/Icons/Search.tsx b/src/Components/Icons/Search.tsx new file mode 100644 index 0000000..bbd75ab --- /dev/null +++ b/src/Components/Icons/Search.tsx @@ -0,0 +1,17 @@ +export default function Search(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/src/Components/Layout.tsx b/src/Components/Layout.tsx index c5d1ace..c386ac2 100644 --- a/src/Components/Layout.tsx +++ b/src/Components/Layout.tsx @@ -1,6 +1,6 @@ -import { Bars3Icon } from "@heroicons/react/24/outline"; import { Navbar, Sidebar, Footer } from "./Components"; import React, { useState } from "react"; +import { Menu } from "./Icons/Icons"; interface LayoutProps { children: JSX.Element; @@ -15,26 +15,23 @@ export default function Layout({ children, closeSidebar }: LayoutProps) { return ( <> -
- - - + + + - -
-
-
+ +
+
diff --git a/src/Components/Navbar.tsx b/src/Components/Navbar.tsx index c0ee749..b81d39a 100644 --- a/src/Components/Navbar.tsx +++ b/src/Components/Navbar.tsx @@ -1,7 +1,6 @@ import { Fragment } from "react"; import { Menu, Transition } from "@headlessui/react"; -import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; -import { Logo } from "./Icons/Logo"; +// import { Logo } from "./Icons/Logo"; import Link from "next/link"; import Button from "./Buttons/Button"; import { signIn, signOut, useSession } from "next-auth/react"; @@ -15,9 +14,10 @@ import { Lock, LogOut, Brush, + Search, + Logo, } from "./Icons/Icons"; import User from "./Icons/User"; -import Image from "next/image"; // Add this function above your existing code to create a new IconWrapper component import { useRouter } from "next/router"; import { type ChangeEvent, type KeyboardEvent } from "react"; @@ -34,7 +34,7 @@ interface NavigationItem { lineAbove: boolean; } -// mobileNavigation +// Navigation function classNames(...classes: string[]) { return classes.filter(Boolean).join(" "); } @@ -121,9 +121,7 @@ export default function Navbar({ children }: NavbarProps) { }, ]; - const mobileNavigation = sessionData - ? signedInNavigation - : signedOutNavigation; + const Navigation = sessionData ? signedInNavigation : signedOutNavigation; const [searchInput, setSearchInput] = useState(""); const router = useRouter(); @@ -147,151 +145,138 @@ export default function Navbar({ children }: NavbarProps) { return ( <> -
- <> -
-
-
-
- - - -
-
-
-
-
- -
-
-
- ) => - setSearchInput(e.target.value) - } - onKeyDown={handleKeyDown} - /> -
+
+
+
+ + + +
+
+
+
+ +
+
+
+ ) => + setSearchInput(e.target.value) + } + onKeyDown={handleKeyDown} + />
-
- {/* Mobile menu button */} - {children} +
+
+
+ {/* Mobile menu button */} + {children} +
+
+ {/* 3 dots and Profile dropdown */} + +
+ + {sessionData ? ( + + ) : ( + + )} +
-
- {/* 3 dots and Profile dropdown */} - -
- - {sessionData ? ( - - ) : ( - - )} - -
- - - {sessionData ? ( -
- {/*
*/} - - {/*
*/} -
-

- {sessionData && ( - {sessionData.user?.name} - )} -

-

- {sessionData && ( - - {sessionData.user?.email} - - )} -

-
-
- ) : ( -

- Menu + + + {sessionData ? ( +

+ {/*
*/} + + {/*
*/} +
+

+ {sessionData && {sessionData.user?.name}}

- )} - {mobileNavigation.map((item) => ( - - {({ active }) => ( - { - e.preventDefault(); - if (item.path === "sign-out") { - void signOut(); - } else { - void router.push(item.path || "/"); - } - }} - href={item.path || "/"} - className={classNames( - active ? "bg-gray-100 " : "", - "block px-4 py-2 text-sm text-gray-700", - item.lineAbove ? "border-t border-gray-200" : "" - )} - > -
- {item.icon("h-4 w-4 stroke-gray-700")} -
{item.name}
-
- +

+ {sessionData && ( + {sessionData.user?.email} )} - - ))} - - -

- {/*Sign up login buttons*/} - {sessionData ? ( - "" - ) : ( -
- - -
- )} +

+
+
+ ) : ( +

+ Menu +

+ )} + {Navigation.map((item) => ( + + {({ active }) => ( + { + e.preventDefault(); + if (item.path === "sign-out") { + void signOut(); + } else { + void router.push(item.path || "/"); + } + }} + href={item.path || "/"} + className={classNames( + active ? "bg-gray-100 " : "", + "block px-4 py-2 text-sm text-gray-700", + item.lineAbove ? "border-t border-gray-200" : "" + )} + > +
+ {item.icon("h-4 w-4 stroke-gray-700")} +
{item.name}
+
+ + )} + + ))} + + + + {/*Sign up login buttons*/} + {sessionData ? ( + "" + ) : ( +
+ +
-
+ )}
- +
); diff --git a/src/Components/Sidebar.tsx b/src/Components/Sidebar.tsx index 3101821..cc8690f 100644 --- a/src/Components/Sidebar.tsx +++ b/src/Components/Sidebar.tsx @@ -372,20 +372,34 @@ export default function Sidebar({
) : ( -
  • +
    • )}