Files
fast_api_template/src/new-frontend/src/components/Common/Navbar.tsx
T
Alejandra e44777f919 Restructure folders, allow editing of users/items, and implement other refactors and improvements (#603)
* Reorganize project directory structure

* Allow edit users/items, add useAuth and useCustomToast, password confirmation

* Minor improvements for consistency

* Add 'Cancel' button to UserInformation in editMode

* Refactor UserSettings

* Enable user password changes and improve error handling

* Enable user information update

* Add logout to Sidebar in mobile devices, conditional tabs depending on role and other improvements

* Add badges

* Remove comment

* Appearance tab updates

* Change badge color

* Reset inputs when clicking on 'Cancel' button

* Disable actions menu for Superuser when logged in

* Modify Logout and update stores
2024-02-26 15:39:09 +01:00

37 lines
1.4 KiB
TypeScript

import React from 'react';
import { Button, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
import { FaPlus, FaSearch } from "react-icons/fa";
import AddUser from '../Admin/AddUser';
import AddItem from '../Items/AddItem';
interface NavbarProps {
type: string;
}
const Navbar: React.FC<NavbarProps> = ({ type }) => {
const addUserModal = useDisclosure();
const addItemModal = useDisclosure();
return (
<>
<Flex py={8} gap={4}>
<InputGroup w={{ base: "100%", md: "auto" }}>
<InputLeftElement pointerEvents="none">
<Icon as={FaSearch} color="gray.400" />
</InputLeftElement>
<Input type="text" placeholder="Search" fontSize={{ base: "sm", md: "inherit" }} borderRadius="8px" />
</InputGroup>
<Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} gap={1} fontSize={{ base: "sm", md: "inherit" }} onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}>
<Icon as={FaPlus} /> Add {type}
</Button>
<AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
<AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
</Flex >
</>
);
};
export default Navbar;