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.
88 lines
2.4 KiB
88 lines
2.4 KiB
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useI18n } from "@/translations/provider";
|
|
import { LoadingSkeleton } from "./loading-skeleton";
|
|
import { LoadingThreeDot } from "./loading-three-dot";
|
|
|
|
type SwipeButtonProps = {
|
|
onSuccess: () => void;
|
|
onCancel?: () => void;
|
|
text: string;
|
|
cancelText?: string;
|
|
disabled?: boolean;
|
|
isLoading?: boolean;
|
|
theme?: "default" | "green";
|
|
};
|
|
|
|
export function SwipeButton({
|
|
onSuccess,
|
|
onCancel,
|
|
text,
|
|
cancelText,
|
|
disabled = false,
|
|
isLoading = false,
|
|
theme = "default",
|
|
}: SwipeButtonProps) {
|
|
const { dictionary: t } = useI18n();
|
|
const [clicked, setClicked] = useState(false);
|
|
|
|
if (isLoading) {
|
|
if (onCancel) {
|
|
return (
|
|
<div className="flex w-full items-center gap-3">
|
|
<LoadingSkeleton className="flex-1 h-[52px] rounded-[11px]" />
|
|
<LoadingSkeleton className="flex-1 h-[52px] rounded-[11px]" />
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="w-full flex">
|
|
<LoadingSkeleton className="w-full h-[52px] rounded-[11px]" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const handleClick = () => {
|
|
setClicked(true);
|
|
onSuccess();
|
|
};
|
|
|
|
const cancelLabel = cancelText || t?.["Cancel"] || "Cancel";
|
|
const isGreen = theme === "green";
|
|
const buttonBg = isGreen ? "bg-[#00AC78]" : "bg-[#F0445B]";
|
|
|
|
const actionButton = (
|
|
<button
|
|
type="button"
|
|
disabled={disabled || clicked}
|
|
onClick={handleClick}
|
|
className={`flex-1 h-[52px] rounded-[11px] ${buttonBg} text-white font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed`}
|
|
>
|
|
{clicked ? <LoadingThreeDot /> : text}
|
|
</button>
|
|
);
|
|
|
|
if (onCancel) {
|
|
return (
|
|
<div className="flex w-full items-center gap-3">
|
|
{/* Cancel Button */}
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="flex-1 h-[52px] rounded-[11px] border border-[#8B8B8B] bg-transparent text-[#8B8B8B] font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90"
|
|
>
|
|
{cancelLabel}
|
|
</button>
|
|
|
|
{/* Action Button */}
|
|
{actionButton}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Single Button full width
|
|
return <div className="w-full flex">{actionButton}</div>;
|
|
}
|
|
|
|
export default SwipeButton;
|