You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
1.0 KiB
34 lines
1.0 KiB
import { Icon, Icons } from "@/components/Icon"; |
|
import { useAutoAnimate } from "@formkit/auto-animate/react"; |
|
import { useCallback } from "react"; |
|
import { useTranslation } from "react-i18next"; |
|
import { ButtonControl } from "./ButtonControl"; |
|
|
|
export interface EditButtonProps { |
|
editing: boolean; |
|
onEdit?: (editing: boolean) => void; |
|
} |
|
|
|
export function EditButton(props: EditButtonProps) { |
|
const { t } = useTranslation() |
|
const [parent] = useAutoAnimate<HTMLSpanElement>(); |
|
|
|
const onClick = useCallback(() => { |
|
props.onEdit?.(!props.editing); |
|
}, [props]); |
|
|
|
return ( |
|
<ButtonControl |
|
onClick={onClick} |
|
className="flex h-12 items-center overflow-hidden rounded-full bg-denim-400 px-4 py-2 text-white transition-[background-color,transform] hover:bg-denim-500 active:scale-105" |
|
> |
|
<span ref={parent}> |
|
{props.editing ? ( |
|
<span className="mx-4 whitespace-nowrap">{t("media.stopEditing")}</span> |
|
) : ( |
|
<Icon icon={Icons.EDIT} /> |
|
)} |
|
</span> |
|
</ButtonControl> |
|
); |
|
}
|
|
|