local-it/dashboard
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix/user apps refactor

Browse source
This commit is contained in:
Valentino 2021-11-24 08:16:45 +00:00
parent 25a82b08c8
commit c8da0322e3
19 changed files with 281 additions and 499 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/Modal/Modal/Modal.tsx
View file

@ -3,7 +3,14 @@ import { Dialog, Transition } from '@headlessui/react';
import { XIcon } from '@heroicons/react/solid';
import { ModalProps } from './types';
export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, title = '' }) => {
export const Modal: React.FC<ModalProps> = ({
open,
onClose,
onSave,
children,
title = '',
useCancelButton = false,
}) => {
const cancelButtonRef = useRef(null);
return (
@ -36,18 +43,22 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, t
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
<div>{title}</div>
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
>
<XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</button>
</div>
{!useCancelButton && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
<div>{title}</div>
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
>
<XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</button>
</div>
)}
<div className="bg-white px-4 p-6">{children}</div>
{onSave && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
@ -57,6 +68,16 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, onSave, children, t
>
Save Changes
</button>
{useCancelButton && (
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
>
Cancel
</button>
)}
</div>
)}
</div>

1
src/components/Modal/Modal/types.ts
View file

@ -3,4 +3,5 @@ export type ModalProps = {
onClose: () => void;
title?: string;
onSave?: () => void;
useCancelButton?: boolean;
};