diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/forms/login_form.tsx | 4 | ||||
| -rw-r--r-- | src/components/main_page_dropdown_menu.tsx | 24 | ||||
| -rw-r--r-- | src/components/navbar.tsx | 8 | ||||
| -rw-r--r-- | src/components/user_account_button.tsx | 15 | ||||
| -rw-r--r-- | src/components/user_account_dropdown_menu.tsx | 22 | ||||
| -rw-r--r-- | src/components/user_dropdown_button.tsx | 32 |
6 files changed, 97 insertions, 8 deletions
diff --git a/src/components/forms/login_form.tsx b/src/components/forms/login_form.tsx index a126d03..f08d2c5 100644 --- a/src/components/forms/login_form.tsx +++ b/src/components/forms/login_form.tsx @@ -1,5 +1,5 @@ import { Modal } from "flowbite"; -import LoginButton from "../login_button"; +import UserAccountButton from "../user_account_button"; import { useEffect, useState } from "react"; import { ApiClient } from "../../clients/api_client"; import Token from "../../lib/token"; @@ -48,8 +48,6 @@ export function LoginForm() { return( <> - <LoginButton/> - <div id="loginModal" tabIndex={-1} aria-hidden="true" className="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full"> <div className="relative w-full max-w-2xl max-h-full"> <div className="relative bg-white rounded-lg shadow dark:bg-gray-700"> diff --git a/src/components/main_page_dropdown_menu.tsx b/src/components/main_page_dropdown_menu.tsx new file mode 100644 index 0000000..8c043a8 --- /dev/null +++ b/src/components/main_page_dropdown_menu.tsx @@ -0,0 +1,24 @@ +import UserAccountButton from "./user_account_button"; +import { LoginForm } from "./forms/login_form"; +import Token from "../lib/token"; +import UserAccountDropdownMenu from "./user_account_dropdown_menu"; + +export default function MainPageDropdownMenu() { + const token = new Token(); + + if(token.present()) { + return ( + <> + <UserAccountButton token={token}/> + <UserAccountDropdownMenu/> + </> + ); + } + + return ( + <> + <UserAccountButton token={token}/> + <LoginForm/> + </> + ); +}
\ No newline at end of file diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index b5599b9..d136e31 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,8 +1,7 @@ import { CartFill } from "react-bootstrap-icons"; import "./stylesheets/navbar.css"; import "./stylesheets/shared.css"; -import React from "react"; -import { LoginForm } from "./forms/login_form"; +import MainPageDropdownMenu from "./main_page_dropdown_menu"; export default function Navbar() { return( @@ -33,7 +32,7 @@ export default function Navbar() { </div> { /* Lado derecho */} - <div className="relative flex items-center"> + <div className="flex items-center"> <a className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" href="#"> <span className="[&>svg]:w-5"> @@ -41,8 +40,7 @@ export default function Navbar() { </span> </a> - { /* Modal */ } - <LoginForm/> + <MainPageDropdownMenu/> </div> </div> </nav> diff --git a/src/components/user_account_button.tsx b/src/components/user_account_button.tsx new file mode 100644 index 0000000..2274811 --- /dev/null +++ b/src/components/user_account_button.tsx @@ -0,0 +1,15 @@ +import { PersonCircle } from "react-bootstrap-icons"; +import UserDropdownButton from "./user_dropdown_button"; +import LoginButton from "./login_button"; + +export default function UserAccountButton({ token }) { + if(token.present()) { + return ( + <UserDropdownButton/> + ); + } + + return ( + <LoginButton/> + ); +}
\ No newline at end of file diff --git a/src/components/user_account_dropdown_menu.tsx b/src/components/user_account_dropdown_menu.tsx new file mode 100644 index 0000000..fac1693 --- /dev/null +++ b/src/components/user_account_dropdown_menu.tsx @@ -0,0 +1,22 @@ +import { PersonFill, DoorOpenFill, CardList } from "react-bootstrap-icons"; + +export default function UserAccountDropdownMenu() { + return( + <div id="userAccountDropdownMenu" className="hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"> + <ul className="relative py-2 text-sm text-gray-700 dark:text-gray-200"> + <li className="flex"> + <i className="px-1 my-2"><PersonFill size={16} color="#394490"/></i> + <a href="#" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Cuenta</a> + </li> + <li className="flex"> + <i className="px-1 my-2"><CardList size={16} color="#394490"/></i> + <a href="#" className="block px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Historial de pedidos</a> + </li> + </ul> + <div className="flex py-2"> + <i className="px-1 my-2"><DoorOpenFill size={16} color="#394490"/></i> + <a href="#" className="flex block px-2 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Cerrar sesión</a> + </div> + </div> + ); +}
\ No newline at end of file diff --git a/src/components/user_dropdown_button.tsx b/src/components/user_dropdown_button.tsx new file mode 100644 index 0000000..f4148bc --- /dev/null +++ b/src/components/user_dropdown_button.tsx @@ -0,0 +1,32 @@ +import { useEffect } from "react"; +import { PersonCircle } from "react-bootstrap-icons"; +import { Dropdown, DropdownOptions } from 'flowbite'; +import UserAccountDropdownMenu from "./user_account_dropdown_menu"; + +export default function UserDropdownButton() { + useEffect(() => { + const target = document.getElementById("userAccountDropdownMenu"); + const trigger = document.getElementById("userAccountButton"); + const options: DropdownOptions = { + triggerType: 'click', + placement: 'bottom' + }; + const dropdown_menu = new Dropdown(target, trigger, options); + trigger?.addEventListener("click", () => { + if(dropdown_menu.isVisible()) + dropdown_menu.show(); + }); + }, []); + + return ( + <> + <button id="userAccountButton" className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"> + <span className="[&>svg]:w-5"> + <PersonCircle color="#394490" size={32}/> + </span> + </button> + + <UserAccountDropdownMenu/> + </> + ); +}
\ No newline at end of file |