fixed name and pull products from api

app/layout.tsx

@@ -14,8 +14,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Ballistic Builder",
+  description: "Freedom On",
 };
 
 export default function RootLayout({

app/page.tsx

@@ -6,7 +6,7 @@ export default function Home() {
       {/* Header Section */}
       <header className="bg-gray-800 text-white py-4 shadow-md">
         <div className="container mx-auto px-6 flex justify-between items-center">
-          <h1 className="text-2xl font-bold">Firearm Builder</h1>
+          <h1 className="text-2xl font-bold">Ballistic Builder</h1>
           <nav>
             <ul className="flex space-x-4">
                 <li><Link href="#features" className="hover:underline">Features</Link></li>

pages/builder.js

@@ -1,54 +1,85 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export default function Builder() {
-  const [build, setBuild] = useState([]);
-  const [part, setPart] = useState("");
+  const [products, setProducts] = useState([]); // Available products from the API
+  const [build, setBuild] = useState([]); // User's selected parts
+  const [loading, setLoading] = useState(true);
 
-  const addPartToBuild = () => {
-    if (part) {
-      setBuild([...build, part]);
-      setPart("");
+  // Fetch available products on page load
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        const response = await fetch("/api/products"); // Replace with your actual API endpoint
+        const data = await response.json();
+        setProducts(data);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setLoading(false);
+      }
     }
+    fetchProducts();
+  }, []);
+
+  // Add a product to the build
+  const addToBuild = (product) => {
+    setBuild((prevBuild) => [...prevBuild, product]);
   };
 
-  const removePartFromBuild = (index) => {
-    setBuild(build.filter((_, i) => i !== index));
+  // Remove a product from the build
+  const removeFromBuild = (productId) => {
+    setBuild((prevBuild) => prevBuild.filter((item) => item.id !== productId));
   };
 
   return (
     <div className="bg-gray-100 min-h-screen p-6">
-      <div className="max-w-3xl mx-auto">
+      <div className="max-w-5xl mx-auto">
         <h1 className="text-3xl font-bold text-center mb-6">Build Your Firearm</h1>
+
+        {/* Available Products */}
+        <div className="bg-white shadow-md rounded p-6 mb-6">
+          <h2 className="text-xl font-bold mb-4">Available Products</h2>
+          {loading ? (
+            <p className="text-gray-700">Loading products...</p>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {products.map((product) => (
+                <div key={product.id} className="bg-gray-100 shadow rounded p-4">
+                  <h3 className="text-lg font-bold">{product.name}</h3>
+                  <p className="text-gray-700">{product.description}</p>
+                  <p className="text-gray-900 font-bold">${product.price}</p>
+                  <button
+                    className="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-700"
+                    onClick={() => addToBuild(product)}
+                  >
+                    Add to Build
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Current Build */}
         <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>
+          <h2 className="text-xl font-bold mb-4">Current Build</h2>
+          {build.length === 0 ? (
+            <p className="text-gray-700">No parts added yet. Start building your firearm!</p>
+          ) : (
+            <ul className="list-disc list-inside">
+              {build.map((item) => (
+                <li key={item.id} className="flex justify-between items-center">
+                  <span>{item.name}</span>
+                  <button
+                    className="text-red-500 hover:underline"
+                    onClick={() => removeFromBuild(item.id)}
+                  >
+                    Remove
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
       </div>
     </div>