mirror of
https://gitea.gofwd.group/dstrawsb/ballistic-builder.git
synced 2025-12-06 02:36:44 -05:00
fixng some changes
This commit is contained in:
55
src/app/Armory/page.tsx
Normal file
55
src/app/Armory/page.tsx
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
import { NextPage } from "next";
|
||||||
|
|
||||||
|
export default function ArmoryPage() {
|
||||||
|
return (
|
||||||
|
<div className="p-4 pt-16 mx-auto max-w-screen-md">
|
||||||
|
<h1 className="text-2xl font-bold mb-4 text-gray-600">AR-15 Builder</h1>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Select components to build your custom AR-15.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow-md p-6 overflow-x-auto text-gray-600">
|
||||||
|
<table className="min-w-full table-auto">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-gray-50 border-b">
|
||||||
|
<th className="px-4 py-2 text-left">Component</th>
|
||||||
|
<th className="px-4 py-2 text-left">Selection</th>
|
||||||
|
<th className="px-4 py-2 text-left">Caliber</th>
|
||||||
|
<th className="px-4 py-2 text-left">Price</th>
|
||||||
|
<th className="px-4 py-2 text-left">Shipping</th>
|
||||||
|
<th className="px-4 py-2 text-left">Where</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{[
|
||||||
|
"Lower Receiver",
|
||||||
|
"Upper Receiver",
|
||||||
|
"Barrel",
|
||||||
|
"Handguard",
|
||||||
|
"Bolt Carrier Group",
|
||||||
|
"Charging Handle",
|
||||||
|
"Buffer Tube",
|
||||||
|
"Stock",
|
||||||
|
"Grip",
|
||||||
|
"Trigger",
|
||||||
|
"Magazine"
|
||||||
|
].map((component) => (
|
||||||
|
<tr key={component} className="border-b hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-2">{component}</td>
|
||||||
|
<td className="px-4 py-2">
|
||||||
|
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
|
||||||
|
Choose a Part
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2">-</td>
|
||||||
|
<td className="px-4 py-2">-</td>
|
||||||
|
<td className="px-4 py-2">-</td>
|
||||||
|
<td className="px-4 py-2">-</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 (
|
|
||||||
<html lang="en">
|
|
||||||
<body>{children}</body>
|
|
||||||
</html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -7,8 +7,8 @@ export default async function LowerReceiverPage() {
|
|||||||
const psa = await getLowerBuildKits();
|
const psa = await getLowerBuildKits();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto">
|
<div className="container mx-auto py-5">
|
||||||
<table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
|
<table className={"table-auto border-separate border-spacing-4 border border-slate-500 text-gray-900"}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr className={styles.tr}>
|
<tr className={styles.tr}>
|
||||||
<th>Component</th>
|
<th>Component</th>
|
||||||
@@ -25,7 +25,7 @@ export default async function LowerReceiverPage() {
|
|||||||
<td>{psa.modelnumber}</td>
|
<td>{psa.modelnumber}</td>
|
||||||
<td className="flex items-center gap-2">
|
<td className="flex items-center gap-2">
|
||||||
${Number(psa.salePrice).toFixed(2)}
|
${Number(psa.salePrice).toFixed(2)}
|
||||||
<Button variant="outline">Buy</Button>
|
<Button variant="default">Buy</Button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { Provider } from "../components/ui/provider"
|
import { Provider } from "../components/ui/provider"
|
||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
import Navbar from "../components/Navbar";
|
import Navbar from "../components/Navbar";
|
||||||
|
import PopNav from "@src/components/PopNav/page";
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Ballistic Builder',
|
title: 'Ballistic Builder',
|
||||||
description: 'Freedom On',
|
description: 'Freedom On',
|
||||||
@@ -16,6 +15,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
|
|||||||
<body className="bg-slate-200 ">
|
<body className="bg-slate-200 ">
|
||||||
<Provider>
|
<Provider>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
<PopNav />
|
||||||
{children}</Provider>
|
{children}</Provider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -9,10 +9,10 @@ import {
|
|||||||
} from "@headlessui/react";
|
} from "@headlessui/react";
|
||||||
import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
const navigation = [
|
const navigation = [
|
||||||
{ name: "Home", href: "/", current: true },
|
{ name: "Armory", href: "/Armory", current: false },
|
||||||
{ name: "Builder", href: "/Builder", current: false },
|
|
||||||
{ name: "Products", href: "/Products", current: false },
|
{ name: "Products", href: "/Products", current: false },
|
||||||
{ name: "Db Data", href: "/Products/lowers", current: false },
|
{ name: "Db Data", href: "/Products/lowers", current: false },
|
||||||
{ name: "Completed Builds", href: "#", current: false },
|
{ name: "Completed Builds", href: "#", current: false },
|
||||||
@@ -45,7 +45,7 @@ export default function Navbar() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
||||||
<div className="flex shrink-0 items-center">
|
<div className="flex shrink-0 items-center">
|
||||||
<p>Ballistics Builder</p>
|
<Link href={"/"}><p>Ballistics Builder</p></Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden sm:ml-6 sm:block">
|
<div className="hidden sm:ml-6 sm:block">
|
||||||
<div className="flex space-x-4">
|
<div className="flex space-x-4">
|
||||||
|
|||||||
367
src/components/PopNav/page.tsx
Normal file
367
src/components/PopNav/page.tsx
Normal file
@@ -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 (
|
||||||
|
<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="#" 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>
|
||||||
|
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="ml-4 flex lg:ml-0">
|
||||||
|
<a href="#">
|
||||||
|
<span className="sr-only">Your Company</span>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
|
||||||
|
className="h-8 w-auto"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Flyout menus */}
|
||||||
|
<PopoverGroup className="hidden lg:ml-8 lg:block lg:self-stretch">
|
||||||
|
<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="#" 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" />
|
||||||
|
<a href="#" className="text-sm font-medium text-gray-700 hover:text-gray-800">
|
||||||
|
Create account
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden lg:ml-8 lg:flex">
|
||||||
|
<a href="#" className="flex items-center text-gray-700 hover:text-gray-800">
|
||||||
|
<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-sm font-medium">CAD</span>
|
||||||
|
<span className="sr-only">, change currency</span>
|
||||||
|
</a>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* Cart */}
|
||||||
|
<div className="ml-4 flow-root lg:ml-6">
|
||||||
|
<a href="#" className="group -m-2 flex items-center p-2">
|
||||||
|
<ShoppingBagIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="size-6 shrink-0 text-gray-400 group-hover:text-gray-500"
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
|
||||||
|
<span className="sr-only">items in cart, view bag</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user