idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-24 01:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): update deprecated HeadlessUI v2 components (#1580)

Browse source 
* refactor(web): move away from old headless UI dot notation

* refactor(web): refactor `Disclosure` component

* refactor(web): rename formik's `Field` to `FormikField` and keep original HeadlessUI component names
This commit is contained in:
martylukyy 2024-08-12 20:36:45 +02:00 • committed by GitHub
parent 21a8e27260
commit 7d7bf9ed4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 185 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web/src/components/header/RightNav.tsx
View file

@ -5,7 +5,7 @@
import { Fragment } from "react";
import { UserIcon } from "@heroicons/react/24/solid";
import { Menu, Transition } from "@headlessui/react";
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
import { classNames } from "@utils";
@ -44,7 +44,7 @@ export const RightNav = (props: RightNavProps) => {
<Menu as="div" className="ml-2 relative">
{({ open }) => (
<>
<Menu.Button
<MenuButton
className={classNames(
open ? "bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-white" : "hover:text-gray-900 dark:hover:text-white",
"text-gray-600 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 px-3 py-2 rounded-2xl text-sm font-medium",
@ -62,7 +62,7 @@ export const RightNav = (props: RightNavProps) => {
className="inline ml-1 h-5 w-5"
aria-hidden="true"
/>
</Menu.Button>
</MenuButton>
<Transition
show={open}
as={Fragment}
@ -73,11 +73,11 @@ export const RightNav = (props: RightNavProps) => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
static
className="origin-top-right absolute right-0 mt-2 w-48 z-10 divide-y divide-gray-100 dark:divide-gray-750 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-250 dark:border-gray-775 focus:outline-none"
>
<Menu.Item>
<MenuItem>
{({ active }) => (
<Link
to="/settings/account"
@ -95,8 +95,8 @@ export const RightNav = (props: RightNavProps) => {
Account
</Link>
)}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => (
<Link
to="/settings"
@ -114,8 +114,8 @@ export const RightNav = (props: RightNavProps) => {
Settings
</Link>
)}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => (
<button
onClick={(e) => {
@ -136,8 +136,8 @@ export const RightNav = (props: RightNavProps) => {
Log out
</button>
)}
</Menu.Item>
</Menu.Items>
</MenuItem>
</MenuItems>
</Transition>
</>
)}