ConfirmFooter.tsx42 lines · main

1	import { PropsWithChildren } from 'react'
2	import { Button, cn } from 'ui'
3
4	interface ConfirmFooterProps {
5	message: string
6	cancelLabel?: string
7	confirmLabel?: string
8	confirmLabelLoading?: string
9	isLoading?: boolean
10	onCancel?: () => void | Promise<void>
11	onConfirm?: () => void | Promise<void>
12	}
13
14	export const ConfirmFooter = ({
15	message,
16	cancelLabel = 'Cancel',
17	confirmLabel = 'Confirm',
18	confirmLabelLoading = 'Working...',
19	isLoading = false,
20	onCancel,
21	onConfirm,
22	}: PropsWithChildren<ConfirmFooterProps>) => {
23	return (
24	<div
25	className={cn(
26	'flex items-center justify-between py-2 pr-2 pl-4 text-xs text-foreground',
27	'relative border border-t-0 overflow-hidden rounded-b-lg bg-border shadow-inset gap-3',
28	'bg-linear-to-r from-background-surface-75 to-background-surface-200'
29	)}
30	>
31	<div className="flex-1 relative z-10">{message}</div>
32	<div className="flex items-center gap-2 relative z-10">
33	<Button size="tiny" type="outline" onClick={onCancel} disabled={isLoading}>
34	{cancelLabel}
35	</Button>
36	<Button size="tiny" type="primary" onClick={onConfirm} disabled={isLoading}>
37	{isLoading ? confirmLabelLoading : confirmLabel}
38	</Button>
39	</div>
40	</div>
41	)
42	}