Create components/cards.py

components/cards.py

@@ -0,0 +1,27 @@
+from components.data import FOOD_DATA
+
+def create_food_card(food_name):
+    food_info = FOOD_DATA[food_name]
+    image_src = f"assets/images/{food_info['image']}"
+    nutrition = food_info["nutrition"]
+    portion_size = food_info["portion_size"]
+
+    # HTML for card
+    card_html = f"""
+    <div class="food-card">
+        <div class="card-header">
+            <img src="{image_src}" alt="{food_name}" class="food-image" />
+            <button class="close-btn" onclick="document.querySelector('.food-card').style.display='none'">✖</button>
+        </div>
+        <div class="card-body">
+            <h3>{food_name}</h3>
+            <table class="nutrition-table">
+                {"".join([f"<tr><td>{key}</td><td>{value}</td></tr>" for key, value in nutrition.items()])}
+            </table>
+        </div>
+        <div class="card-footer">
+            <p><strong>Portion Size:</strong> {portion_size}</p>
+        </div>
+    </div>
+    """
+    return card_html