mirror of
https://gitea.gofwd.group/dstrawsb/ballistic-builder.git
synced 2025-12-06 02:36:44 -05:00
new pages
This commit is contained in:
9
pages/api/products.js
Normal file
9
pages/api/products.js
Normal file
@@ -0,0 +1,9 @@
|
||||
export default function handler(req, res) {
|
||||
const products = [
|
||||
{ id: 1, name: "Barrel A", description: "High-quality steel barrel.", price: 120 },
|
||||
{ id: 2, name: "Scope X", description: "Precision optical scope.", price: 300 },
|
||||
{ id: 3, name: "Stock Z", description: "Ergonomic polymer stock.", price: 80 },
|
||||
];
|
||||
|
||||
res.status(200).json(products);
|
||||
}
|
||||
56
pages/builder.js
Normal file
56
pages/builder.js
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
98
pages/oldindex.js
Normal file
98
pages/oldindex.js
Normal file
@@ -0,0 +1,98 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="bg-gray-100 min-h-screen flex flex-col">
|
||||
{/* 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>
|
||||
<nav>
|
||||
<ul className="flex space-x-4">
|
||||
<li><Link href="#features"><a className="hover:underline">Features</a></Link></li>
|
||||
<li><Link href="/builder"><a className="hover:underline">Builder</a></Link></li>
|
||||
<li><Link href="/products"><a className="hover:underline">Products</a></Link></li>
|
||||
<li><Link href="#contact"><a className="hover:underline">Contact</a></Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gray-700 text-white py-20 text-center">
|
||||
<div className="container mx-auto px-6">
|
||||
<h2 className="text-4xl font-bold mb-4">Build Your Dream Firearm</h2>
|
||||
<p className="text-lg mb-6">
|
||||
Customize every component of your firearm with ease and precision.
|
||||
</p>
|
||||
<Link href="/builder">
|
||||
<a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
||||
Get Started
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20">
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
<h3 className="text-3xl font-bold mb-6">Features</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-white shadow-md p-6 rounded">
|
||||
<h4 className="text-xl font-bold mb-2">Extensive Database</h4>
|
||||
<p className="text-gray-600">
|
||||
Access thousands of firearm parts from trusted resellers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white shadow-md p-6 rounded">
|
||||
<h4 className="text-xl font-bold mb-2">Compatibility Checker</h4>
|
||||
<p className="text-gray-600">
|
||||
Ensure every part works perfectly together.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white shadow-md p-6 rounded">
|
||||
<h4 className="text-xl font-bold mb-2">Save & Share Builds</h4>
|
||||
<p className="text-gray-600">
|
||||
Save your builds or share them with friends.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Section */}
|
||||
<section id="about" className="bg-gray-200 py-20">
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
<h3 className="text-3xl font-bold mb-6">About Us</h3>
|
||||
<p className="text-gray-700">
|
||||
Firearm Builder is your go-to platform for customizing, building,
|
||||
and exploring firearm parts. Designed for enthusiasts by
|
||||
enthusiasts, we make firearm building easy and accessible.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section id="contact" className="py-20">
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
<h3 className="text-3xl font-bold mb-6">Contact Us</h3>
|
||||
<p className="text-gray-700 mb-6">
|
||||
Have questions or feedback? We’d love to hear from you!
|
||||
</p>
|
||||
<Link href="mailto:support@firearmbuilder.com">
|
||||
<a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
||||
Email Us
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer Section */}
|
||||
<footer className="bg-gray-800 text-white py-4">
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
<p>© {new Date().getFullYear()} Firearm Builder. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
pages/products.js
Normal file
43
pages/products.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Products() {
|
||||
const [products, setProducts] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Fetch products from an API
|
||||
useEffect(() => {
|
||||
async function fetchProducts() {
|
||||
try {
|
||||
const response = await fetch("https://api.example.com/products");
|
||||
const data = await response.json();
|
||||
setProducts(data);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error("Error fetching products:", error);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchProducts();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-100 min-h-screen p-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-center mb-6">Products</h1>
|
||||
{loading ? (
|
||||
<p className="text-center 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-white shadow-md rounded p-4">
|
||||
<h2 className="text-xl font-bold mb-2">{product.name}</h2>
|
||||
<p className="text-gray-700 mb-2">{product.description}</p>
|
||||
<p className="text-gray-900 font-bold">${product.price}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user