getting lost files back and making some changes p1

src/components/sellable_items.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type ApiItem = {
+  id: string;
+  item_name: string;
+  amount: number;
+  price: number;
+  enabled: boolean;
+  shop: {
+    label: string;
+  };
+  item: {
+    stock: number;
+  };
+};
+
+const formatName = (name: string) => {
+  const parts = name.split(":");
+  if (!parts[1]) return "";
+  return parts[1]
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+};
+
+const getImage = (name: string) => {
+  const [mod, item] = name.split(":");
+  return `/textures/${mod}/${item}.png`;
+};
+
+const Items = ({ query }: { query: string }) => {
+  const [items, setItems] = useState<ApiItem[]>([]);
+
+  useEffect(() => {
+    const loadItems = async () => {
+      try {
+        const res = await fetch("/api/items");
+        const data = (await res.json()) as ApiItem[];
+
+        setItems(data.filter((item) => item.enabled));
+      } catch (err) {
+        console.error("Failed to load items", err);
+      }
+    };
+
+    void loadItems();
+  }, []);
+
+  const filteredItems = items.filter((item) =>
+    formatName(item.item_name).toLowerCase().includes(query.toLowerCase()),
+  );
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+      {filteredItems.map((item) => (
+        <div
+          key={item.id}
+          className="flex gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
+        >
+          <img
+            src={getImage(item.item_name)}
+            alt={item.item_name}
+            className="item-img h-12 w-12"
+          />
+
+          <div className="w-70">
+            <h2 className="text-xl font-bold">{formatName(item.item_name)}</h2>
+            <p className="text-sm">{item.item.stock} available</p>
+            <p className="text-xs text-white/70">Shop: {item.shop.label}</p>
+          </div>
+
+          <div className="flex flex-col items-end">
+            <button className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700">
+              Buy
+            </button>
+            <h3 className="w-fit self-center text-xl font-bold">
+              {item.price}$/{item.amount}
+            </h3>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Items;