add reset button
parent
5f1c4d809e
commit
f2307117ca
@ -1,31 +1,29 @@
|
|||||||
import { Spinner } from "flowbite-react";
|
import { Spinner } from 'flowbite-react'
|
||||||
import React from "react";
|
import React from 'react'
|
||||||
|
|
||||||
export default function Button({ children, type = "", processing, onClick }) {
|
export default function Button({ children, type = '', processing, onClick }) {
|
||||||
let className = ""
|
let className = ''
|
||||||
if(type === "" || type === "primary") {
|
if (type === '' || type === 'primary') {
|
||||||
className = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
|
className =
|
||||||
} else if (type === "secondary") {
|
'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
|
||||||
className = "text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
|
} else if (type === 'secondary') {
|
||||||
|
className =
|
||||||
|
'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700'
|
||||||
|
} else if (type === 'danger') {
|
||||||
|
className =
|
||||||
|
'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={className}
|
className={className}
|
||||||
disabled={processing}
|
disabled={processing}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between space-x-1">
|
<div className="flex items-center justify-between space-x-1">
|
||||||
{processing ? (
|
{processing ? <Spinner /> : <div>{children}</div>}
|
||||||
<Spinner/>
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue