diff --git a/frontend/package.json b/frontend/package.json index 7ad7496..7c2e183 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,31 +3,36 @@ "version": "0.1.0", "private": true, "dependencies": { + "@headlessui/react": "^1.5.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^13.2.1", - "@windmill/react-ui": "^0.6.0", "autoprefixer": "^10.4.4", + "classnames": "^2.3.1", "hls.js": "^1.1.5", "postcss": "^8.4.12", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-focus-lock": "^2.8.1", "react-helmet": "^6.1.0", "react-icons": "^4.3.1", "react-router-dom": "6", "react-scripts": "5.0.0", "react-toastify": "^8.2.0", + "react-transition-group": "^4.4.2", "tailwindcss": "^3.0.23", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, "devDependencies": { + "@types/classnames": "^2.3.1", "@types/hls.js": "^1.0.0", "@types/jest": "^27.0.1", "@types/node": "^16.7.13", "@types/react": "^17.0.20", "@types/react-dom": "^17.0.9", - "@types/react-helmet": "^6.1.5" + "@types/react-helmet": "^6.1.5", + "@types/react-transition-group": "^4.4.4" }, "scripts": { "start": "react-scripts start", diff --git a/frontend/src/components/header.component.tsx b/frontend/src/components/header.component.tsx index 1ed0276..011398d 100644 --- a/frontend/src/components/header.component.tsx +++ b/frontend/src/components/header.component.tsx @@ -1,24 +1,13 @@ import React from "react"; import { VscDebug } from "react-icons/vsc"; -import { - Avatar, - Badge, - Input, - Dropdown, - DropdownItem, -} from "@windmill/react-ui"; +import { BsFillMoonStarsFill, BsFillSunFill, BsSearch } from "react-icons/bs"; +import { BiLogOutCircle, BiCog } from "react-icons/bi"; +import { IoMdPerson } from "react-icons/io"; +import { AiOutlineMenu, AiOutlineBell } from "react-icons/ai"; import { SidebarContext, ThemeContext } from "../context"; -import { - BellIcon, - MenuIcon, - MoonIcon, - OutlineCogIcon, - OutlineLogoutIcon, - OutlinePersonIcon, - SearchIcon, - SunIcon, -} from "../icons"; + import { toast } from "react-toastify"; +import { Avatar, Badge, Input, Dropdown, DropdownItem } from "./widgets"; const Header = () => { const { toggleSidebar } = React.useContext(SidebarContext); @@ -53,15 +42,14 @@ const Header = () => { onClick={toggleSidebar} aria-label="Menu" > -