incr/resources/js/components/Display/InlineForm.tsx
2025-07-12 19:59:37 +02:00

68 lines
No EOL
2.1 KiB
TypeScript

import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import { cn } from '@/lib/utils';
import { X } from 'lucide-react';
interface InlineFormProps {
type: 'purchase' | 'milestone' | null;
onClose: () => void;
onPurchaseSuccess?: () => void;
onMilestoneSuccess?: () => void;
className?: string;
}
export default function InlineForm({
type,
onClose,
onPurchaseSuccess,
onMilestoneSuccess,
className
}: InlineFormProps) {
if (!type) return null;
const title = type === 'purchase' ? 'ADD PURCHASE' : 'ADD MILESTONE';
return (
<div
className={cn(
"bg-black border-4 border-gray-800 rounded-lg",
"shadow-2xl shadow-red-500/20",
"p-6",
className
)}
>
{/* Header */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-red-500 font-mono tracking-wide text-lg">
{title}
</h2>
<button
onClick={onClose}
className="text-red-400 hover:text-red-300 transition-colors p-1"
aria-label="Close form"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Form Content */}
<div className="flex justify-center">
{type === 'purchase' ? (
<AddPurchaseForm
onSuccess={() => {
if (onPurchaseSuccess) onPurchaseSuccess();
onClose();
}}
/>
) : (
<AddMilestoneForm
onSuccess={() => {
if (onMilestoneSuccess) onMilestoneSuccess();
onClose();
}}
/>
)}
</div>
</div>
);
}