42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { useState } from "react"
|
|
import { CheckIcon } from "lucide-react"
|
|
import { useTranslation } from "react-i18next"
|
|
type Props = {
|
|
onClick?: () => void
|
|
disabled?: boolean
|
|
className?: string
|
|
text?: string
|
|
textOnSave?: string
|
|
btnType?: "button" | "submit" | "reset"
|
|
}
|
|
|
|
export const SaveButton = ({
|
|
onClick,
|
|
disabled,
|
|
className,
|
|
text = "save",
|
|
textOnSave = "saved",
|
|
btnType = "button"
|
|
}: Props) => {
|
|
const [clickedSave, setClickedSave] = useState(false)
|
|
const { t } = useTranslation("common")
|
|
return (
|
|
<button
|
|
type={btnType}
|
|
onClick={() => {
|
|
setClickedSave(true)
|
|
if (onClick) {
|
|
onClick()
|
|
}
|
|
setTimeout(() => {
|
|
setClickedSave(false)
|
|
}, 1000)
|
|
}}
|
|
disabled={disabled}
|
|
className={`inline-flex mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm dark:bg-white dark:text-gray-800 disabled:opacity-50 ${className}`}>
|
|
{clickedSave ? <CheckIcon className="w-4 h-4 mr-2" /> : null}
|
|
{clickedSave ? t(textOnSave) : t(text)}
|
|
</button>
|
|
)
|
|
}
|