diff --git a/src/app/Armory/page.tsx b/src/app/Armory/page.tsx new file mode 100644 index 0000000..92406b1 --- /dev/null +++ b/src/app/Armory/page.tsx @@ -0,0 +1,55 @@ +import { NextPage } from "next"; + +export default function ArmoryPage() { + return ( +
+

AR-15 Builder

+

+ Select components to build your custom AR-15. +

+ +
+ + + + + + + + + + + + + {[ + "Lower Receiver", + "Upper Receiver", + "Barrel", + "Handguard", + "Bolt Carrier Group", + "Charging Handle", + "Buffer Tube", + "Stock", + "Grip", + "Trigger", + "Magazine" + ].map((component) => ( + + + + + + + + + ))} + +
ComponentSelectionCaliberPriceShippingWhere
{component} + + ----
+
+
+ ); +} diff --git a/src/app/Builder/layout.tsx b/src/app/Builder/layout.tsx deleted file mode 100644 index b5f2157..0000000 --- a/src/app/Builder/layout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export const metadata = { - title: 'Ballistic Builder', - description: 'Generated by Forward Group, LLC', -} - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - {children} - - ) -} diff --git a/src/app/Products/lowers/page.tsx b/src/app/Products/lowers/page.tsx index 35a16d4..5d6ee24 100644 --- a/src/app/Products/lowers/page.tsx +++ b/src/app/Products/lowers/page.tsx @@ -7,8 +7,8 @@ export default async function LowerReceiverPage() { const psa = await getLowerBuildKits(); return ( -
- +
+
@@ -25,7 +25,7 @@ export default async function LowerReceiverPage() { ))} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b63e652..aef6217 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,8 +1,7 @@ import { Provider } from "../components/ui/provider" import "../styles/globals.css"; import Navbar from "../components/Navbar"; - - +import PopNav from "@src/components/PopNav/page"; export const metadata = { title: 'Ballistic Builder', description: 'Freedom On', @@ -16,6 +15,7 @@ export default function RootLayout(props: { children: React.ReactNode }) { + {children} diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 7707411..966aac4 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -9,10 +9,10 @@ import { } from "@headlessui/react"; import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline"; import Image from "next/image"; +import Link from "next/link"; const navigation = [ - { name: "Home", href: "/", current: true }, - { name: "Builder", href: "/Builder", current: false }, + { name: "Armory", href: "/Armory", current: false }, { name: "Products", href: "/Products", current: false }, { name: "Db Data", href: "/Products/lowers", current: false }, { name: "Completed Builds", href: "#", current: false }, @@ -45,7 +45,7 @@ export default function Navbar() {
-

Ballistics Builder

+

Ballistics Builder

diff --git a/src/components/PopNav/page.tsx b/src/components/PopNav/page.tsx new file mode 100644 index 0000000..1455409 --- /dev/null +++ b/src/components/PopNav/page.tsx @@ -0,0 +1,367 @@ +'use client' + +import { Fragment, useState } from 'react' +import { + Dialog, + DialogBackdrop, + DialogPanel, + Popover, + PopoverButton, + PopoverGroup, + PopoverPanel, + Tab, + TabGroup, + TabList, + TabPanel, + TabPanels, +} from '@headlessui/react' +import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, XMarkIcon } from '@heroicons/react/24/outline' + +const navigation = { + categories: [ + { + id: 'armory', + name: 'Armory', + featured: [ + { + name: 'Build Alpha', + href: '#', + imageSrc: 'https://images.unsplash.com/photo-1700774607099-8c4631ee9764?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + imageAlt: 'Rad AR15.', + }, + { + name: 'Build Beta', + href: '#', + imageSrc: 'https://images.unsplash.com/photo-1669489890884-baff10f74b49?q=80&w=2899&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + imageAlt: 'Rad AR15.', + }, + ], + sections: [ + { + id: 'lower-parts', + name: 'Lower Parts', + items: [ + { name: 'Lower Receivers', href: '#' }, + { name: 'Grips', href: '#' }, + { name: 'Stocks', href: '#' }, + { name: 'Triggers', href: '#' }, + { name: 'Parts', href: '#' }, + ], + }, + { + id: 'upper-parts', + name: 'Upper Parks', + items: [ + { name: 'Upper Receiver', href: '#' }, + { name: 'Barrels', href: '#' }, + { name: 'Handguards', href: '#' }, + { name: 'Muzzle Devices', href: '#' }, + ], + }, + { + id: 'brands', + name: 'Brands', + items: [ + { name: 'Full Nelson', href: '#' }, + { name: 'My Way', href: '#' }, + { name: 'Re-Arranged', href: '#' }, + { name: 'Counterfeit', href: '#' }, + { name: 'Significant Other', href: '#' }, + ], + }, + ], + }, + + ], + pages: [ + { name: 'Menu 2', href: '#' }, + ], +} + +export default function PopNav() { + const [open, setOpen] = useState(false) + + return ( +
+ {/* Mobile menu */} + + + +
+ +
+ +
+ + {/* Links */} + +
+ + {navigation.categories.map((category) => ( + + {category.name} + + ))} + +
+ + {navigation.categories.map((category) => ( + +
+ {category.featured.map((item) => ( +
+ {item.imageAlt} + + + +
+ ))} +
+ {category.sections.map((section) => ( +
+

+ {section.name} +

+ +
+ ))} + + ))} + + + +
+ {navigation.pages.map((page) => ( + + ))} +
+ + + + + +
+ + +
+ {/*

+ Get free delivery on orders over $100 +

*/} + + +
+
+ ) +}
Component{psa.modelnumber} ${Number(psa.salePrice).toFixed(2)} - +