You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

30 lines
1.4 KiB
React

1 year ago
import { Spinner } from 'flowbite-react'
import React from 'react'
1 year ago
export default function Button({ children, type = '', processing, onClick }) {
let className = ''
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'
} 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 (
1 year ago
<button
type="button"
className={className}
disabled={processing}
onClick={onClick}
>
<div className="flex items-center justify-between space-x-1">
1 year ago
{processing ? <Spinner /> : <div>{children}</div>}
</div>
</button>
)
1 year ago
}