From 7c5fe019f13e51c63134b48f9c5d1b1353192e04 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Sat, 21 Mar 2026 16:49:29 -0400
Subject: [PATCH] Add CraftingPanel component for crafting functionality

---
 web/client/src/components/CraftingPanel.jsx | 71 +++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 web/client/src/components/CraftingPanel.jsx

diff --git a/web/client/src/components/CraftingPanel.jsx b/web/client/src/components/CraftingPanel.jsx
new file mode 100644
index 0000000..2b40a4f
--- /dev/null
+++ b/web/client/src/components/CraftingPanel.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { useInventoryStore } from '../store/inventoryStore';
+import { formatItemName } from '../utils/itemUtils';
+import ItemIcon from './ItemIcon';
+import './CraftingPanel.css';
+
+function CraftingPanel() {
+  const craftable = useInventoryStore((state) => state.craftable);
+  const craftTurtleOk = useInventoryStore((state) => state.craftTurtleOk);
+  const craftItem = useInventoryStore((state) => state.craftItem);
+  const [craftingIdx, setCraftingIdx] = useState(null);
+
+  const handleCraft = async (idx) => {
+    setCraftingIdx(idx);
+    await craftItem(idx);
+    setCraftingIdx(null);
+  };
+
+  return (
+    <div className="crafting-panel">
+      <div className="crafting-header">
+        <h2>🔨 Crafting</h2>
+        <div className={`turtle-status ${craftTurtleOk ? 'online' : 'offline'}`}>
+          🐢 {craftTurtleOk ? 'Turtle Online' : 'Turtle Offline'}
+        </div>
+      </div>
+
+      {!craftTurtleOk && (
+        <div className="turtle-warning">
+          ⚠️ Crafting turtle is not connected. Crafting commands will fail.
+        </div>
+      )}
+
+      <div className="craft-list">
+        {(craftable || []).map((recipe, idx) => (
+          <div key={idx} className="craft-card">
+            <div className="craft-output">
+              <ItemIcon itemName={recipe.output} size={32} />
+              <div className="craft-info">
+                <span className="craft-name">{formatItemName(recipe.output)}</span>
+                <span className="craft-count">Produces {recipe.count || 1}</span>
+              </div>
+            </div>
+
+            <div className="craft-ingredients">
+              {recipe.slots && Object.entries(recipe.slots).map(([slot, item]) => (
+                <div key={slot} className="craft-ingredient">
+                  <ItemIcon itemName={item} size={16} />
+                  <span>{formatItemName(item)}</span>
+                </div>
+              ))}
+            </div>
+
+            <button
+              className={`mc-btn green craft-btn ${craftingIdx === idx ? 'crafting' : ''}`}
+              onClick={() => handleCraft(idx + 1)}
+              disabled={craftingIdx !== null || !craftTurtleOk}
+            >
+              {craftingIdx === idx + 1 ? '⏳ Crafting...' : '🔨 Craft'}
+            </button>
+          </div>
+        ))}
+        {(!craftable || craftable.length === 0) && (
+          <div className="no-data">No crafting recipes configured</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CraftingPanel;