improve ui

kumarkrishh · Dec 3, 2024 · 00043e1 · 00043e1
1 parent 44be160
commit 00043e1
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/components/EditRecipeCard.tsx b/components/EditRecipeCard.tsx
@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Checkbox } from '@/components/ui/checkbox';
-import { MoreHorizontal, Plus } from 'lucide-react';
+import { X, Plus } from 'lucide-react';
 import OpenAI from 'openai';
 import { useCallback } from 'react';
 
@@ -53,6 +53,14 @@ export default function EditRecipeCard({
       setIngredients([...ingredients, { id: Date.now(), original: '', selected: true }]);
     };
 
+    const handleRemoveIngredient = (index: number) => {
+      setIngredients((prevIngredients: any) => {
+        const updatedIngredients = [...prevIngredients];
+        updatedIngredients.splice(index, 1);
+        return updatedIngredients;
+      });
+    };
+
     const handleUpdateRecipe = async () => {
       // console.log('Updating recipe...');
       // console.log('Ingredients:', ingredients);
@@ -92,7 +100,6 @@ export default function EditRecipeCard({
       }
     };
 
-
     const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
       const { name, value } = e.target;
       setEditedRecipe((prev: any) => ({ ...prev, [name]: value }));
@@ -164,9 +171,13 @@ const handleSave = async () => {
                 onChange={(e) => handleIngredientEdit(index, e.target.value)}
                 className={`ml-2 flex-grow ${!ingredient.selected ? 'text-gray-400' : ''}`}
               />
-              {/* <Button variant="ghost" size="sm">
-                <MoreHorizontal className="h-4 w-4" />
-              </Button> */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleRemoveIngredient(index)}
+              >
+                <X className="h-4 w-4" />
+              </Button>
             </div>
           ))}
           <Button onClick={handleAddIngredient} className="mt-2">