79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
|
|
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
|
|
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
|
|
import { cn } from '@/lib/utils';
|
|
import { X } from 'lucide-react';
|
|
import ComponentTitle from '@/components/ui/ComponentTitle';
|
|
|
|
interface InlineFormProps {
|
|
type: 'purchase' | 'milestone' | 'price' | null;
|
|
onClose: () => void;
|
|
onPurchaseSuccess?: () => void;
|
|
onMilestoneSuccess?: () => void;
|
|
onPriceSuccess?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export default function InlineForm({
|
|
type,
|
|
onClose,
|
|
onPurchaseSuccess,
|
|
onMilestoneSuccess,
|
|
onPriceSuccess,
|
|
className
|
|
}: InlineFormProps) {
|
|
if (!type) return null;
|
|
|
|
const title = type === 'purchase' ? 'ADD PURCHASE' : type === 'milestone' ? 'ADD MILESTONE' : 'UPDATE PRICE';
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"bg-black p-8",
|
|
"transition-all duration-300",
|
|
className
|
|
)}
|
|
>
|
|
{/* Header */}
|
|
<div className="w-full border-4 border-red-500 p-2 bg-black space-y-4">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<ComponentTitle>{title}</ComponentTitle>
|
|
|
|
<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();
|
|
}}
|
|
/>
|
|
) : type === 'milestone' ? (
|
|
<AddMilestoneForm
|
|
onSuccess={() => {
|
|
if (onMilestoneSuccess) onMilestoneSuccess();
|
|
onClose();
|
|
}}
|
|
/>
|
|
) : (
|
|
<UpdatePriceForm
|
|
onSuccess={() => {
|
|
if (onPriceSuccess) onPriceSuccess();
|
|
onClose();
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|