Cleanup

components/forms/pricing-tiers.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Trash, PlusCircle } from "lucide-react";
+
+interface PricingTiersProps {
+  pricing: any[];
+  handleTierChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
+  handleRemoveTier: (index: number) => void;
+  handleAddTier: () => void;
+}
+
+export const PricingTiers = ({
+  pricing,
+  handleTierChange,
+  handleRemoveTier,
+  handleAddTier,
+}: PricingTiersProps) => (
+  <div>
+    <h3 className="text-sm font-medium">Tiered Pricing</h3>
+
+    {pricing?.length > 0 ? (
+      pricing.map((tier, index) => (
+        <div key={tier._id || index} className="flex items-center gap-2 mt-2">
+          <Input
+            name="minQuantity"
+            type="number"
+            min="1"
+            placeholder="Min Quantity"
+            value={tier.minQuantity}
+            onChange={(e) => handleTierChange(e, index)}
+            className="h-8 text-sm px-2 flex-1"
+          />
+          <Input
+            name="pricePerUnit"
+            type="number"
+            placeholder="Price per unit"
+            value={tier.pricePerUnit}
+            onChange={(e) => handleTierChange(e, index)}
+            className="h-8 text-sm px-2 flex-1"
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-red-500 hover:bg-red-100"
+            onClick={() => handleRemoveTier(index)}
+          >
+            <Trash className="h-5 w-5" />
+          </Button>
+        </div>
+      ))
+    ) : (
+      <p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p>
+    )}
+
+    <Button
+      variant="outline"
+      size="sm"
+      className="mt-2"
+      onClick={handleAddTier}
+    >
+      <PlusCircle className="w-4 h-4 mr-1" />
+      Add Tier
+    </Button>
+  </div>
+);