mirror of
https://gitea.gofwd.group/dstrawsb/ballistic-builder.git
synced 2025-12-05 18:26:45 -05:00
new pages
This commit is contained in:
183
app/page.tsx
183
app/page.tsx
@@ -1,100 +1,97 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
|
||||
app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li>Save and see your changes instantly!</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
<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>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
|
||||
126
package-lock.json
generated
126
package-lock.json
generated
@@ -17,6 +17,7 @@
|
||||
"@mui/system": "^6.1.7",
|
||||
"@mui/x-data-grid": "^7.22.2",
|
||||
"@prisma/client": "^5.22.0",
|
||||
"drizzle-orm": "^0.36.3",
|
||||
"fontsource-roboto": "^4.0.0",
|
||||
"next": "15.0.3",
|
||||
"react": "18.2.0",
|
||||
@@ -3161,6 +3162,131 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/drizzle-orm": {
|
||||
"version": "0.36.3",
|
||||
"resolved": "https://registry.npmjs.org/drizzle-orm/-/drizzle-orm-0.36.3.tgz",
|
||||
"integrity": "sha512-ffQB7CcyCTvQBK6xtRLMl/Jsd5xFTBs+UTHrgs1hbk68i5TPkbsoCPbKEwiEsQZfq2I7VH632XJpV1g7LS2H9Q==",
|
||||
"license": "Apache-2.0",
|
||||
"peerDependencies": {
|
||||
"@aws-sdk/client-rds-data": ">=3",
|
||||
"@cloudflare/workers-types": ">=3",
|
||||
"@electric-sql/pglite": ">=0.2.0",
|
||||
"@libsql/client": ">=0.10.0",
|
||||
"@libsql/client-wasm": ">=0.10.0",
|
||||
"@neondatabase/serverless": ">=0.1",
|
||||
"@op-engineering/op-sqlite": ">=2",
|
||||
"@opentelemetry/api": "^1.4.1",
|
||||
"@planetscale/database": ">=1",
|
||||
"@prisma/client": "*",
|
||||
"@tidbcloud/serverless": "*",
|
||||
"@types/better-sqlite3": "*",
|
||||
"@types/pg": "*",
|
||||
"@types/react": ">=18",
|
||||
"@types/sql.js": "*",
|
||||
"@vercel/postgres": ">=0.8.0",
|
||||
"@xata.io/client": "*",
|
||||
"better-sqlite3": ">=7",
|
||||
"bun-types": "*",
|
||||
"expo-sqlite": ">=14.0.0",
|
||||
"knex": "*",
|
||||
"kysely": "*",
|
||||
"mysql2": ">=2",
|
||||
"pg": ">=8",
|
||||
"postgres": ">=3",
|
||||
"react": ">=18",
|
||||
"sql.js": ">=1",
|
||||
"sqlite3": ">=5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@aws-sdk/client-rds-data": {
|
||||
"optional": true
|
||||
},
|
||||
"@cloudflare/workers-types": {
|
||||
"optional": true
|
||||
},
|
||||
"@electric-sql/pglite": {
|
||||
"optional": true
|
||||
},
|
||||
"@libsql/client": {
|
||||
"optional": true
|
||||
},
|
||||
"@libsql/client-wasm": {
|
||||
"optional": true
|
||||
},
|
||||
"@neondatabase/serverless": {
|
||||
"optional": true
|
||||
},
|
||||
"@op-engineering/op-sqlite": {
|
||||
"optional": true
|
||||
},
|
||||
"@opentelemetry/api": {
|
||||
"optional": true
|
||||
},
|
||||
"@planetscale/database": {
|
||||
"optional": true
|
||||
},
|
||||
"@prisma/client": {
|
||||
"optional": true
|
||||
},
|
||||
"@tidbcloud/serverless": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/better-sqlite3": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/pg": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/sql.js": {
|
||||
"optional": true
|
||||
},
|
||||
"@vercel/postgres": {
|
||||
"optional": true
|
||||
},
|
||||
"@xata.io/client": {
|
||||
"optional": true
|
||||
},
|
||||
"better-sqlite3": {
|
||||
"optional": true
|
||||
},
|
||||
"bun-types": {
|
||||
"optional": true
|
||||
},
|
||||
"expo-sqlite": {
|
||||
"optional": true
|
||||
},
|
||||
"knex": {
|
||||
"optional": true
|
||||
},
|
||||
"kysely": {
|
||||
"optional": true
|
||||
},
|
||||
"mysql2": {
|
||||
"optional": true
|
||||
},
|
||||
"pg": {
|
||||
"optional": true
|
||||
},
|
||||
"postgres": {
|
||||
"optional": true
|
||||
},
|
||||
"prisma": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"sql.js": {
|
||||
"optional": true
|
||||
},
|
||||
"sqlite3": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/eastasianwidth": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"@mui/system": "^6.1.7",
|
||||
"@mui/x-data-grid": "^7.22.2",
|
||||
"@prisma/client": "^5.22.0",
|
||||
"drizzle-orm": "^0.36.3",
|
||||
"fontsource-roboto": "^4.0.0",
|
||||
"next": "15.0.3",
|
||||
"react": "18.2.0",
|
||||
|
||||
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