dialog-form

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { AnimatePresence, motion } from 'framer-motion';
5import { LoaderCircle, X } from 'lucide-react';
6import React, { RefObject, useRef, useState } from 'react';
7import { useOnClickOutside } from 'usehooks-ts';
8 
9interface SubmitDialogFormButtonProps {
10  onClick?: () =>
11    | Promise<{ success: boolean; message: string }>
12    | { success: boolean; message: string };
13  state?: 'idle' | 'loading' | 'success' | 'error';
14}
15 
16export const SubmitDialogFormButton = ({
17  onClick,
18  state = 'idle'
19}: SubmitDialogFormButtonProps) => {
20  const handleClick = async () => {
21    if (onClick) {
22      return await onClick();
23    }
24  };
25 
26  const buttonVariants = {
27    idle: {
28      label: 'Submit',
29      icon: null,
30      animate: {
31        backgroundColor: '#3b82f6',
32        color: '#ffffff'
33      }
34    },
35    loading: {
36      label: null,
37      icon: <LoaderCircle className="animate-spin" size={20} />,
38      animate: {
39        backgroundColor: '#1e40af',
40        color: '#ffffff'
41      }
42    },
43    success: {
44      label: 'Submitted',
45      icon: null,
46      animate: {
47        backgroundColor: '#059669',
48        color: '#ffffff'
49      }
50    },
51    error: {
52      label: 'Try Again',
53      icon: null,
54      animate: {
55        x: [0, 2, -2, 0, -2, 2, 0, -2, 2, 0, -2, 2, 0],
56        backgroundColor: '#dc2626',
57        color: '#ffffff'
58      }
59    }
60  };
61 
62  const entryExitAnimation = {
63    initial: {
64      opacity: 0,
65      y: '-100%'
66    },
67    animate: {
68      opacity: 1,
69      y: 0
70    },
71    exit: {
72      opacity: 0,
73      y: '100%'
74    },
75    transition: {
76      type: 'spring' as const,
77      stiffness: 600,
78      damping: 30
79    }
80  };
81 
82  return (
83    <button
84      type="button"
85      disabled={state === 'loading' || state === 'success'}
86      className="disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.97] disabled:active:scale-100"
87    >
88      <AnimatePresence initial={false} mode="popLayout">
89        <motion.div
90          animate={buttonVariants[state].animate}
91          transition={{
92            duration: 0.3,
93            ease: 'easeInOut'
94          }}
95          onClick={handleClick}
96          className="text-sm px-3 py-1.5 rounded-md flex items-center gap-1 min-w-[100px] justify-center overflow-hidden text-white bg-blue-600 hover:shadow-lg transition-shadow cursor-pointer"
97        >
98          {buttonVariants[state].label && (
99            <motion.span key={`label-${state}`} {...entryExitAnimation}>
100// … truncated