Refactor(web): Replace final-form with Formik and cleanup (#46)

* refactor: begin to replace final-form

* refactor: replace final-form with formik n cleanup
This commit is contained in:
Ludvig Lundgren 2021-12-23 22:01:59 +01:00 committed by GitHub
parent c4d580eb03
commit 5e29564f03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 1523 additions and 3409 deletions

View file

@ -0,0 +1,48 @@
import { PlusIcon } from "@heroicons/react/solid";
interface EmptySimpleProps {
title: string;
subtitle: string;
buttonText: string;
buttonAction: any;
}
export const EmptySimple = ({ title, subtitle, buttonText, buttonAction }: EmptySimpleProps) => (
<div className="text-center py-8">
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-200">{subtitle}</p>
<div className="mt-6">
<button
type="button"
onClick={buttonAction}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
>
<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
{buttonText}
</button>
</div>
</div>
)
interface EmptyListStateProps {
text: string;
buttonText?: string;
buttonOnClick?: any;
}
export function EmptyListState({ text, buttonText, buttonOnClick }: EmptyListStateProps) {
return (
<div className="px-4 py-12 flex flex-col items-center">
<p className="text-center text-gray-500 dark:text-white">{text}</p>
{buttonText && buttonOnClick && (
<button
type="button"
className="relative inline-flex items-center px-4 py-2 mt-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={buttonOnClick}
>
{buttonText}
</button>
)}
</div>
)
}