blob: ae60e9fa4f73bcc77ae419f2bc39a712c137a0f0 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import { Button } from "@repo/ui/components/button"
import { Loader2, type LucideIcon } from "lucide-react"
import { motion } from "motion/react"
interface ActionButtonsProps {
onCancel: () => void
onSubmit?: () => void
submitText: string
submitIcon?: LucideIcon
isSubmitting?: boolean
isSubmitDisabled?: boolean
submitType?: "button" | "submit"
className?: string
}
export function ActionButtons({
onCancel,
onSubmit,
submitText,
submitIcon: SubmitIcon,
isSubmitting = false,
isSubmitDisabled = false,
submitType = "submit",
className = "",
}: ActionButtonsProps) {
return (
<div className={`flex gap-3 order-1 sm:order-2 justify-end ${className}`}>
<Button
className="hover:bg-foreground/10 border-none flex-1 sm:flex-initial cursor-pointer"
onClick={onCancel}
type="button"
variant="ghost"
>
Cancel
</Button>
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex-1 sm:flex-initial"
>
<Button
className="w-full cursor-pointer text-black dark:text-white"
disabled={isSubmitting || isSubmitDisabled}
onClick={submitType === "button" ? onSubmit : undefined}
type={submitType}
>
{isSubmitting ? (
<>
<Loader2 className="h-4 w-4 animate-spin mr-2" />
{submitText.includes("Add")
? "Adding..."
: submitText.includes("Upload")
? "Uploading..."
: "Processing..."}
</>
) : (
<>
{SubmitIcon && <SubmitIcon className="h-4 w-4 mr-2" />}
{submitText}
</>
)}
</Button>
</motion.div>
</div>
)
}
|