Forward/ballistic-builder
3
0
Fork 0
mirror of https://gitea.gofwd.group/dstrawsb/ballistic-builder.git synced 2025-12-06 02:36:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

working

Browse Source
This commit is contained in:
Don Strawsburg
2025-01-29 08:13:07 -05:00
parent 8b95c9356d
commit a87598021e
17 changed files with 573 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
src/app/components/PopNav-keep/page.tsx Normal file
View File

@@ -0,0 +1,400 @@
"use client";
import { Fragment, useEffect, 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";
import { validateRequest } from "@/lib/auth/validate-request";
import { User } from "lucia";
import Cookies from "js-cookie";
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: "/Products/lowers" },
{ name: "Grips", href: "/Products/grips" },
{ name: "Magazines", href: "/Products/magazines" },
{ name: "Stocks", href: "/Products/stocks" },
{ name: "Triggers", href: "/Products/triggers" },
{ name: "Parts", href: "/Products/parts" },
],
},
{
id: "upper-parts",
name: "Upper Parts",
items: [
{ name: "Upper Receiver", href: "/Products/uppers" },
{ name: "Barrels", href: "/Products/barrels" },
{ name: "Handguards", href: "/Products/handguards" },
{ name: "Muzzle Devices", href: "/Products/muzzle-devices" },
],
},
{
id: "brands",
name: "Top Selling Brands",
items: [
{ name: "Radian Weapons", href: "#" },
{ name: "Noveske", href: "#" },
{ name: "Aero Precision", href: "#" },
{ name: "Primary Arms", href: "#" },
],
},
],
},
],
pages: [
{ name: "Single Product", href: "/product" },
],
};
export default function PopNav() {
const [open, setOpen] = useState(false);
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
const fetchUser = async () => {
const result = null; //(await validateRequest());
/* if (result.user) {
setUser(result.user);
} */
};
fetchUser();
}, []);
return (
<div className="bg-white">
{/* Mobile menu */}
<Dialog open={open} onClose={setOpen} className="relative z-40 lg:hidden">
<DialogBackdrop
transition
className="fixed inset-0 bg-black/25 transition-opacity duration-300 ease-linear data-[closed]:opacity-0"
/>
<div className="fixed inset-0 z-40 flex">
<DialogPanel
transition
className="relative flex w-full max-w-xs transform flex-col overflow-y-auto bg-white pb-12 shadow-xl transition duration-300 ease-in-out data-[closed]:-translate-x-full"
>
<div className="flex px-4 pb-2 pt-5">
<button
type="button"
onClick={() => setOpen(false)}
className="relative -m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400"
>
<span className="absolute -inset-0.5" />
<span className="sr-only">Close menu</span>
<XMarkIcon aria-hidden="true" className="size-6" />
</button>
</div>
{/* Links */}
<TabGroup className="mt-2">
<div className="border-b border-gray-200">
<TabList className="-mb-px flex space-x-8 px-4">
{navigation.categories.map((category) => (
<Tab
key={category.name}
className="flex-1 whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-base font-medium text-gray-900 data-[selected]:border-indigo-600 data-[selected]:text-indigo-600"
>
{category.name}
</Tab>
))}
</TabList>
</div>
<TabPanels as={Fragment}>
{navigation.categories.map((category) => (
<TabPanel
key={category.name}
className="space-y-10 px-4 pb-8 pt-10"
>
<div className="grid grid-cols-2 gap-x-4">
{category.featured.map((item) => (
<div key={item.name} className="group relative text-sm">
<img
alt={item.imageAlt}
src={item.imageSrc}
className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75"
/>
<a
href={item.href}
className="mt-6 block font-medium text-gray-900"
>
<span
aria-hidden="true"
className="absolute inset-0 z-10"
/>
{item.name}
</a>
<p aria-hidden="true" className="mt-1">
See Build
</p>
</div>
))}
</div>
{category.sections.map((section) => (
<div key={section.name}>
<p
id={`${category.id}-${section.id}-heading-mobile`}
className="font-medium text-gray-900"
>
{section.name}
</p>
<ul
role="list"
aria-labelledby={`${category.id}-${section.id}-heading-mobile`}
className="mt-6 flex flex-col space-y-6"
>
{section.items.map((item) => (
<li key={item.name} className="flow-root">
<a
href={item.href}
className="-m-2 block p-2 text-gray-500"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
))}
</TabPanel>
))}
</TabPanels>
</TabGroup>
<div className="space-y-6 border-t border-gray-200 px-4 py-6">
{navigation.pages.map((page) => (
<div key={page.name} className="flow-root">
<a
href={page.href}
className="-m-2 block p-2 font-medium text-gray-900"
>
{page.name}
</a>
</div>
))}
</div>
<div className="space-y-6 border-t border-gray-200 px-4 py-6">
<div className="flow-root">
<a
href="/login"
className="-m-2 block p-2 font-medium text-gray-900"
>
Sign In
</a>
</div>
<div className="flow-root">
<a
href="#"
className="-m-2 block p-2 font-medium text-gray-900"
>
Create account
</a>
</div>
</div>
<div className="border-t border-gray-200 px-4 py-6">
<a href="#" className="-m-2 flex items-center p-2">
<img
alt=""
src="https://tailwindui.com/plus/img/flags/flag-canada.svg"
className="block h-auto w-5 shrink-0"
/>
<span className="ml-3 block text-base font-medium text-gray-900">
CAD
</span>
<span className="sr-only">, change currency</span>
</a>
</div>
</DialogPanel>
</div>
</Dialog>
<header className="relative bg-white">
{/* <p className="flex h-10 items-center justify-center bg-green-900 px-4 text-sm font-medium text-white sm:px-6 lg:px-8">
Get free delivery on orders over $100
</p> */}
<nav
aria-label="Top"
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
>
<div className="border-b border-gray-200">
<div className="flex h-16 items-center">
<button
type="button"
onClick={() => setOpen(true)}
className="relative rounded-md bg-white p-2 text-gray-400 lg:hidden"
>
<span className="absolute -inset-0.5" />
<span className="sr-only">Open menu</span>
<Bars3Icon aria-hidden="true" className="size-6" />
</button>
{/* Flyout menus */}
<PopoverGroup className="hidden lg:ml-8 lg:block lg:self-stretch z-20">
<div className="flex h-full space-x-8">
{navigation.categories.map((category) => (
<Popover key={category.name} className="flex">
<div className="relative flex">
<PopoverButton className="relative z-10 -mb-px flex items-center border-b-2 border-transparent pt-px text-sm font-medium text-gray-700 transition-colors duration-200 ease-out hover:text-gray-800 data-[open]:border-indigo-600 data-[open]:text-indigo-600">
{category.name}
</PopoverButton>
</div>
<PopoverPanel
transition
className="absolute inset-x-0 top-full text-sm text-gray-500 transition data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
>
{/* Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow */}
<div
aria-hidden="true"
className="absolute inset-0 top-1/2 bg-white shadow"
/>
<div className="relative bg-white">
<div className="mx-auto max-w-7xl px-8">
<div className="grid grid-cols-2 gap-x-8 gap-y-10 py-16">
<div className="col-start-2 grid grid-cols-2 gap-x-8">
{category.featured.map((item) => (
<div
key={item.name}
className="group relative text-base sm:text-sm"
>
<img
alt={item.imageAlt}
src={item.imageSrc}
className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75"
/>
<a
href={item.href}
className="mt-6 block font-medium text-gray-900"
>
<span
aria-hidden="true"
className="absolute inset-0 z-10"
/>
{item.name}
</a>
<p aria-hidden="true" className="mt-1">
See Build
</p>
</div>
))}
</div>
<div className="row-start-1 grid grid-cols-3 gap-x-8 gap-y-10 text-sm">
{category.sections.map((section) => (
<div key={section.name}>
<p
id={`${section.name}-heading`}
className="font-medium text-gray-900"
>
{section.name}
</p>
<ul
role="list"
aria-labelledby={`${section.name}-heading`}
className="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
>
{section.items.map((item) => (
<li key={item.name} className="flex">
<a
href={item.href}
className="hover:text-gray-800"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
))}
</div>
</div>
</div>
</div>
</PopoverPanel>
</Popover>
))}
{navigation.pages.map((page) => (
<a
key={page.name}
href={page.href}
className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>
{page.name}
</a>
))}
</div>
</PopoverGroup>
<div className="ml-auto flex items-center">
<div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a
href="/login"
className="text-sm font-medium text-gray-700 hover:text-gray-800"
>
Sign In
</a>
<span aria-hidden="true" className="h-6 w-px bg-gray-200" />
</div>
{/* Search */}
<div className="flex lg:ml-6">
<a href="#" className="p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Search</span>
<MagnifyingGlassIcon
aria-hidden="true"
className="size-6"
/>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
</div>
);
}