dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { useAutoAnimate } from "@formkit/auto-animate/react";
2import { useCallback, useRef } from "react";
3import { useTranslation } from "react-i18next";
4
5export interface EditButtonWithTextProps {
6 editing: boolean;
7 onEdit?: (editing: boolean) => void;
8 id?: string;
9 text: string;
10 secondaryText?: string;
11}
12
13export function EditButtonWithText(props: EditButtonWithTextProps) {
14 const { t } = useTranslation();
15 const [parent] = useAutoAnimate<HTMLSpanElement>();
16 const buttonRef = useRef<HTMLButtonElement>(null);
17
18 const onClick = useCallback(() => {
19 props.onEdit?.(!props.editing);
20 }, [props]);
21
22 return (
23 <button
24 ref={buttonRef}
25 type="button"
26 onClick={onClick}
27 className="flex h-12 items-center overflow-hidden rounded-full bg-background-secondary px-4 py-2 text-white transition-[background-color,transform] hover:bg-background-secondaryHover active:scale-105"
28 id={props.id} // Assign id to the button
29 >
30 <span ref={parent}>
31 {props.editing ? (
32 <span className="mx-2 sm:mx-4 whitespace-nowrap">
33 {props.text ?? t("home.mediaList.stopEditing")}
34 </span>
35 ) : (
36 <span className="mx-2 sm:mx-4 whitespace-nowrap">
37 {props.secondaryText}
38 </span>
39 )}
40 </span>
41 </button>
42 );
43}