idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): headlessui v2 (#1570)

Browse source 
* refactor(web): fix build errors, SlideOver panels and forms

* refactor(web): fix build errors

* refactor(web): fix filter importer

* refactor(web): fix modals

* chore(web): bump pnpm

* refactor(web): pending component

* refactor(web): Dialog.Title to DialogTitle
This commit is contained in:
martylukyy 2024-06-18 14:51:04 +02:00 • committed by GitHub
parent 0841a1ce7c
commit 7821f7fb2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 139 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web/src/forms/settings/APIKeyAddForm.tsx
View file

@ -7,7 +7,7 @@ import { Fragment } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-hot-toast";
import { XMarkIcon } from "@heroicons/react/24/solid";
import { Dialog, Transition } from "@headlessui/react";
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
@ -45,13 +45,11 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
};
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
<Transition show={isOpen} as={Fragment}>
<Dialog as="div" static className="absolute inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
<div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0"/>
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
<DialogPanel className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<TransitionChild
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
@ -75,8 +73,7 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
<div className="flex items-start justify-between space-x-3">
<div className="space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Create API
key</Dialog.Title>
<DialogTitle className="text-lg font-medium text-gray-900 dark:text-white">Create API key</DialogTitle>
<p className="text-sm text-gray-500 dark:text-gray-400">
Add new API key.
</p>
@ -151,10 +148,10 @@ export function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
)}
</Formik>
</div>
</Transition.Child>
</div>
</TransitionChild>
</DialogPanel>
</div>
</Dialog>
</Transition.Root>
</Transition>
);
}