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:
179
app/page.tsx
179
app/page.tsx
@@ -1,100 +1,97 @@
|
|||||||
import Image from "next/image";
|
import Link from "next/link";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
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)]">
|
<div className="bg-gray-100 min-h-screen flex flex-col">
|
||||||
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
{/* Header Section */}
|
||||||
<Image
|
<header className="bg-gray-800 text-white py-4 shadow-md">
|
||||||
className="dark:invert"
|
<div className="container mx-auto px-6 flex justify-between items-center">
|
||||||
src="/next.svg"
|
<h1 className="text-2xl font-bold">Firearm Builder</h1>
|
||||||
alt="Next.js logo"
|
<nav>
|
||||||
width={180}
|
<ul className="flex space-x-4">
|
||||||
height={38}
|
<li><Link href="#features"><a className="hover:underline">Features</a></Link></li>
|
||||||
priority
|
<li><Link href="/builder"><a className="hover:underline">Builder</a></Link></li>
|
||||||
/>
|
<li><Link href="/products"><a className="hover:underline">Products</a></Link></li>
|
||||||
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
<li><Link href="#contact"><a className="hover:underline">Contact</a></Link></li>
|
||||||
<li className="mb-2">
|
</ul>
|
||||||
Get started by editing{" "}
|
</nav>
|
||||||
<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>
|
</div>
|
||||||
</main>
|
</header>
|
||||||
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
|
||||||
<a
|
{/* Hero Section */}
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
<section className="bg-gray-700 text-white py-20 text-center">
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
<div className="container mx-auto px-6">
|
||||||
target="_blank"
|
<h2 className="text-4xl font-bold mb-4">Build Your Dream Firearm</h2>
|
||||||
rel="noopener noreferrer"
|
<p className="text-lg mb-6">
|
||||||
>
|
Customize every component of your firearm with ease and precision.
|
||||||
<Image
|
</p>
|
||||||
aria-hidden
|
<Link href="/builder">
|
||||||
src="/file.svg"
|
<a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
||||||
alt="File icon"
|
Get Started
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Learn
|
|
||||||
</a>
|
</a>
|
||||||
<a
|
</Link>
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
</div>
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
</section>
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
{/* Features Section */}
|
||||||
>
|
<section id="features" className="py-20">
|
||||||
<Image
|
<div className="container mx-auto px-6 text-center">
|
||||||
aria-hidden
|
<h3 className="text-3xl font-bold mb-6">Features</h3>
|
||||||
src="/window.svg"
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
alt="Window icon"
|
<div className="bg-white shadow-md p-6 rounded">
|
||||||
width={16}
|
<h4 className="text-xl font-bold mb-2">Extensive Database</h4>
|
||||||
height={16}
|
<p className="text-gray-600">
|
||||||
/>
|
Access thousands of firearm parts from trusted resellers.
|
||||||
Examples
|
</p>
|
||||||
</a>
|
</div>
|
||||||
<a
|
<div className="bg-white shadow-md p-6 rounded">
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
<h4 className="text-xl font-bold mb-2">Compatibility Checker</h4>
|
||||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
<p className="text-gray-600">
|
||||||
target="_blank"
|
Ensure every part works perfectly together.
|
||||||
rel="noopener noreferrer"
|
</p>
|
||||||
>
|
</div>
|
||||||
<Image
|
<div className="bg-white shadow-md p-6 rounded">
|
||||||
aria-hidden
|
<h4 className="text-xl font-bold mb-2">Save & Share Builds</h4>
|
||||||
src="/globe.svg"
|
<p className="text-gray-600">
|
||||||
alt="Globe icon"
|
Save your builds or share them with friends.
|
||||||
width={16}
|
</p>
|
||||||
height={16}
|
</div>
|
||||||
/>
|
</div>
|
||||||
Go to nextjs.org →
|
</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>
|
</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>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
126
package-lock.json
generated
126
package-lock.json
generated
@@ -17,6 +17,7 @@
|
|||||||
"@mui/system": "^6.1.7",
|
"@mui/system": "^6.1.7",
|
||||||
"@mui/x-data-grid": "^7.22.2",
|
"@mui/x-data-grid": "^7.22.2",
|
||||||
"@prisma/client": "^5.22.0",
|
"@prisma/client": "^5.22.0",
|
||||||
|
"drizzle-orm": "^0.36.3",
|
||||||
"fontsource-roboto": "^4.0.0",
|
"fontsource-roboto": "^4.0.0",
|
||||||
"next": "15.0.3",
|
"next": "15.0.3",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
@@ -3161,6 +3162,131 @@
|
|||||||
"csstype": "^3.0.2"
|
"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": {
|
"node_modules/eastasianwidth": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
"@mui/system": "^6.1.7",
|
"@mui/system": "^6.1.7",
|
||||||
"@mui/x-data-grid": "^7.22.2",
|
"@mui/x-data-grid": "^7.22.2",
|
||||||
"@prisma/client": "^5.22.0",
|
"@prisma/client": "^5.22.0",
|
||||||
|
"drizzle-orm": "^0.36.3",
|
||||||
"fontsource-roboto": "^4.0.0",
|
"fontsource-roboto": "^4.0.0",
|
||||||
"next": "15.0.3",
|
"next": "15.0.3",
|
||||||
"react": "18.2.0",
|
"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