new pages

pages/builder.js

@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+export default function Builder() {
+  const [build, setBuild] = useState([]);
+  const [part, setPart] = useState("");
+
+  const addPartToBuild = () => {
+    if (part) {
+      setBuild([...build, part]);
+      setPart("");
+    }
+  };
+
+  const removePartFromBuild = (index) => {
+    setBuild(build.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="bg-gray-100 min-h-screen p-6">
+      <div className="max-w-3xl mx-auto">
+        <h1 className="text-3xl font-bold text-center mb-6">Build Your Firearm</h1>
+        <div className="bg-white shadow-md rounded p-6">
+          <div className="flex items-center space-x-4">
+            <input
+              type="text"
+              placeholder="Enter part name (e.g., Barrel, Scope)"
+              className="border border-gray-300 p-2 rounded w-full"
+              value={part}
+              onChange={(e) => setPart(e.target.value)}
+            />
+            <button
+              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
+              onClick={addPartToBuild}
+            >
+              Add Part
+            </button>
+          </div>
+          <h2 className="text-xl font-bold mt-6">Current Build</h2>
+          <ul className="list-disc list-inside mt-4">
+            {build.map((p, index) => (
+              <li key={index} className="flex justify-between items-center">
+                <span>{p}</span>
+                <button
+                  className="text-red-500 hover:underline"
+                  onClick={() => removePartFromBuild(index)}
+                >
+                  Remove
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}