@rpg-engine/long-bow 0.7.90 → 0.7.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.90",
+  "version": "0.7.91",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CraftBook/CraftBook.tsx

@@ -67,7 +67,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     savedSelectedType ?? Object.keys(ItemSubType)[0]
   );
   const [size, setSize] = useState<{ width: string; height: string }>();
-
+  const [searchTerm, setSearchTerm] = useState('');
   const [isCraftingDisabled, setIsCraftingDisabled] = useState(false);
 
   useEffect(() => {
@@ -150,6 +150,15 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     ));
   };
 
+  const filteredCraftableItems = craftablesItems?.filter(item => {
+    const matchesSearch = item.name
+      .toLowerCase()
+      .includes(searchTerm.toLowerCase());
+    const matchesCategory =
+      selectedType === 'Suggested' || item.type === selectedType;
+    return matchesSearch && matchesCategory;
+  });
+
   if (!size) return null;
 
   return (
@@ -169,6 +178,15 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
         <div style={{ width: '100%' }}>
           <Title>Craftbook</Title>
           <Subtitle>Select an item to craft</Subtitle>
+          <SearchContainer>
+            <input
+              type="text"
+              className="rpgui-input"
+              placeholder="Search items..."
+              value={searchTerm}
+              onChange={e => setSearchTerm(e.target.value)}
+            />
+          </SearchContainer>
           <hr className="golden" />
         </div>
 
@@ -178,7 +196,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
           </ItemTypes>
 
           <RadioInputScroller className="inputRadioCraftBook">
-            {craftablesItems?.map(item => (
+            {filteredCraftableItems?.map(item => (
               <CraftingRecipe
                 key={item.key}
                 atlasIMG={atlasIMG}
@@ -304,3 +322,27 @@ const ItemTypes = styled.div`
     width: 100%;
   }
 `;
+
+const SearchContainer = styled.div`
+  margin: 8px 0;
+  padding: 0 16px;
+
+  input {
+    width: 100%;
+    font-size: 0.8rem;
+    padding: 8px 12px;
+    background-color: rgba(0, 0, 0, 0.3);
+    border: none;
+    color: white;
+    border-radius: 4px;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    &:focus {
+      outline: none;
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+`;