mirror of
https://github.com/vercel/commerce.git
synced 2025-07-27 04:01:23 +00:00
updates
This commit is contained in:
Joel Varty
@@ -10,122 +10,118 @@ import { I18nWidget } from '@components/common'
|
||||
import s from './Footer.module.css'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
pages?: Page[]
|
||||
className?: string
|
||||
children?: any
|
||||
pages?: Page[],
|
||||
agilityProps: any
|
||||
}
|
||||
|
||||
const links = [
|
||||
{
|
||||
name: 'Home',
|
||||
url: '/',
|
||||
},
|
||||
]
|
||||
const links:[] = []
|
||||
|
||||
const Footer: FC<Props> = ({ className, pages }) => {
|
||||
const { sitePages } = usePages(pages)
|
||||
const rootClassName = cn(s.root, className)
|
||||
const Footer: FC<Props> = ({ className, pages, agilityProps }) => {
|
||||
const { sitePages } = usePages(pages)
|
||||
const rootClassName = cn(s.root, className)
|
||||
|
||||
return (
|
||||
<footer className={rootClassName}>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<Link href="/">
|
||||
<a className="flex flex-initial items-center font-bold md:mr-24">
|
||||
<span className="rounded-full border border-accent-6 mr-2">
|
||||
<Logo />
|
||||
</span>
|
||||
<span>ACME</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col-span-1 lg:col-span-8">
|
||||
<div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
|
||||
{[...links, ...sitePages].map((page) => (
|
||||
<span key={page.url} className="py-3 md:py-0 md:pb-4">
|
||||
<Link href={page.url!}>
|
||||
<a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
|
||||
{page.name}
|
||||
</a>
|
||||
</Link>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 lg:col-span-2 flex items-start lg:justify-end text-primary">
|
||||
<div className="flex space-x-6 items-center h-10">
|
||||
<a
|
||||
className={s.link}
|
||||
aria-label="Github Repository"
|
||||
href="https://github.com/joelvarty/nextsj-commerce-agilitycms"
|
||||
>
|
||||
<Github />
|
||||
</a>
|
||||
<I18nWidget />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-6 pb-10 flex flex-col md:flex-row justify-between items-center space-y-4 text-accent-6 text-sm">
|
||||
<div>
|
||||
<span>© 2021 ACME, Inc. All rights reserved.</span>
|
||||
</div>
|
||||
<div className="flex items-center text-primary text-sm">
|
||||
<span className="text-primary">Created by</span>
|
||||
<a
|
||||
rel="noopener"
|
||||
href="https://vercel.com"
|
||||
aria-label="Vercel.com Link"
|
||||
target="_blank"
|
||||
className="text-primary"
|
||||
>
|
||||
<Vercel
|
||||
className="inline-block h-6 ml-3 text-primary"
|
||||
alt="Vercel.com Logo"
|
||||
/>
|
||||
</a>
|
||||
const siteData = agilityProps.globalData["sitedata"]
|
||||
|
||||
<span className="text-primary ml-5">CMS Integration by</span>
|
||||
<a
|
||||
rel="noopener"
|
||||
href="https://agilitycms.com"
|
||||
aria-label="AgilityCMS.com Link"
|
||||
target="_blank"
|
||||
className="text-primary"
|
||||
>
|
||||
<Agility
|
||||
className="inline-block h-6 ml-3 text-primary"
|
||||
alt="AgilityCMS.com Logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
)
|
||||
return (
|
||||
<footer className={rootClassName}>
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<Link href="/">
|
||||
<a className="flex flex-initial items-center font-bold md:mr-24 ">
|
||||
<img src={siteData.logo.url} height="32" width="32" className="rounded-full border border-accent-6 mr-2" />
|
||||
<span>{siteData.name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col-span-1 lg:col-span-8">
|
||||
<div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
|
||||
{[...links, ...sitePages, ...siteData.links].map((page) => (
|
||||
<span key={page.url} className="py-3 md:py-0 md:pb-4">
|
||||
<Link href={page.url!}>
|
||||
<a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
|
||||
{page.name}
|
||||
</a>
|
||||
</Link>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 lg:col-span-2 flex items-start lg:justify-end text-primary">
|
||||
<div className="flex space-x-6 items-center h-10">
|
||||
<a
|
||||
className={s.link}
|
||||
aria-label="Github Repository"
|
||||
href="https://github.com/joelvarty/nextsj-commerce-agilitycms"
|
||||
>
|
||||
<Github />
|
||||
</a>
|
||||
<I18nWidget />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-6 pb-10 flex flex-col md:flex-row justify-between items-center space-y-4 text-accent-6 text-sm">
|
||||
<div>
|
||||
<span>© 2021 ACME, Inc. All rights reserved.</span>
|
||||
</div>
|
||||
<div className="flex items-center text-primary text-sm">
|
||||
<span className="text-primary">Created by</span>
|
||||
<a
|
||||
rel="noopener"
|
||||
href="https://vercel.com"
|
||||
aria-label="Vercel.com Link"
|
||||
target="_blank"
|
||||
className="text-primary"
|
||||
>
|
||||
<Vercel
|
||||
className="inline-block h-6 ml-3 text-primary"
|
||||
alt="Vercel.com Logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<span className="text-primary ml-5">CMS Integration by</span>
|
||||
<a
|
||||
rel="noopener"
|
||||
href="https://agilitycms.com"
|
||||
aria-label="AgilityCMS.com Link"
|
||||
target="_blank"
|
||||
className="text-primary"
|
||||
>
|
||||
<Agility
|
||||
className="inline-block h-6 ml-3 text-primary"
|
||||
alt="AgilityCMS.com Logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
function usePages(pages?: Page[]) {
|
||||
const { locale } = useRouter()
|
||||
const sitePages: Page[] = []
|
||||
const { locale } = useRouter()
|
||||
const sitePages: Page[] = []
|
||||
|
||||
if (pages) {
|
||||
pages.forEach((page) => {
|
||||
const slug = page.url && getSlug(page.url)
|
||||
if (!slug) return
|
||||
if (locale && !slug.startsWith(`${locale}/`)) return
|
||||
sitePages.push(page)
|
||||
})
|
||||
}
|
||||
if (pages) {
|
||||
pages.forEach((page) => {
|
||||
const slug = page.url && getSlug(page.url)
|
||||
if (!slug) return
|
||||
if (locale && !slug.startsWith(`${locale}/`)) return
|
||||
sitePages.push(page)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
sitePages: sitePages.sort(bySortOrder),
|
||||
}
|
||||
return {
|
||||
sitePages: sitePages.sort(bySortOrder),
|
||||
}
|
||||
}
|
||||
|
||||
// Sort pages by the sort order assigned in the BC dashboard
|
||||
function bySortOrder(a: Page, b: Page) {
|
||||
return (a.sort_order ?? 0) - (b.sort_order ?? 0)
|
||||
return (a.sort_order ?? 0) - (b.sort_order ?? 0)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
||||
@@ -45,7 +45,8 @@ const FeatureBar = dynamic(
|
||||
interface Props {
|
||||
pageProps: {
|
||||
pages?: Page[]
|
||||
categories: Category[]
|
||||
categories: Category[],
|
||||
agilityProps: any
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,10 +91,14 @@ const SidebarUI: FC = () => {
|
||||
) : null
|
||||
}
|
||||
|
||||
const Layout: FC<Props> = ({
|
||||
children,
|
||||
pageProps: { categories = [], ...pageProps },
|
||||
}) => {
|
||||
const Layout: FC<Props> = (props) => {
|
||||
|
||||
const {
|
||||
children,
|
||||
pageProps: { agilityProps, categories = [], ...pageProps },
|
||||
} = props
|
||||
|
||||
|
||||
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
|
||||
const { locale = 'en-US' } = useRouter()
|
||||
const navBarlinks = categories.slice(0, 2).map((c) => ({
|
||||
@@ -104,9 +109,9 @@ const Layout: FC<Props> = ({
|
||||
return (
|
||||
<CommerceProvider locale={locale}>
|
||||
<div className={cn(s.root)}>
|
||||
<Navbar links={navBarlinks} />
|
||||
<Navbar links={navBarlinks} agilityProps={agilityProps}/>
|
||||
<main className="fit">{children}</main>
|
||||
<Footer pages={pageProps.pages} />
|
||||
<Footer pages={pageProps.pages} agilityProps={agilityProps} />
|
||||
<ModalUI />
|
||||
<SidebarUI />
|
||||
<FeatureBar
|
||||
|
||||
@@ -6,46 +6,52 @@ import { Logo, Container } from '@components/ui'
|
||||
import { Searchbar, UserNav } from '@components/common'
|
||||
|
||||
interface Link {
|
||||
href: string
|
||||
label: string
|
||||
href: string
|
||||
label: string
|
||||
}
|
||||
interface NavbarProps {
|
||||
links?: Link[]
|
||||
links?: Link[],
|
||||
agilityProps: any
|
||||
}
|
||||
|
||||
const Navbar: FC<NavbarProps> = ({ links }) => (
|
||||
<NavbarRoot>
|
||||
<Container>
|
||||
<div className={s.nav}>
|
||||
<div className="flex items-center flex-1">
|
||||
<Link href="/">
|
||||
<a className={s.logo} aria-label="Logo">
|
||||
<Logo />
|
||||
</a>
|
||||
</Link>
|
||||
<nav className={s.navMenu}>
|
||||
<Link href="/search">
|
||||
<a className={s.link}>All</a>
|
||||
</Link>
|
||||
{links?.map((l) => (
|
||||
<Link href={l.href} key={l.href}>
|
||||
<a className={s.link}>{l.label}</a>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="justify-center flex-1 hidden lg:flex">
|
||||
<Searchbar />
|
||||
</div>
|
||||
<div className="flex items-center justify-end flex-1 space-x-8">
|
||||
<UserNav />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pb-4 lg:px-6 lg:hidden">
|
||||
<Searchbar id="mobile-search" />
|
||||
</div>
|
||||
</Container>
|
||||
</NavbarRoot>
|
||||
)
|
||||
const Navbar: FC<NavbarProps> = ({ links, agilityProps }) => {
|
||||
|
||||
const siteData = agilityProps.globalData["sitedata"]
|
||||
|
||||
return (
|
||||
<NavbarRoot>
|
||||
<Container>
|
||||
<div className={s.nav}>
|
||||
<div className="flex items-center flex-1">
|
||||
<Link href="/">
|
||||
<a className={s.logo} aria-label="Logo">
|
||||
<img src={siteData.logo.url} alt={siteData.logo.label} height="32" width="32" className="rounded-full border border-accent-6" />
|
||||
</a>
|
||||
</Link>
|
||||
<nav className={s.navMenu}>
|
||||
<Link href="/search">
|
||||
<a className={s.link}>All</a>
|
||||
</Link>
|
||||
{links?.map((l) => (
|
||||
<Link href={l.href} key={l.href}>
|
||||
<a className={s.link}>{l.label}</a>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="justify-center flex-1 hidden lg:flex">
|
||||
<Searchbar />
|
||||
</div>
|
||||
<div className="flex items-center justify-end flex-1 space-x-8">
|
||||
<UserNav />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex pb-4 lg:px-6 lg:hidden">
|
||||
<Searchbar id="mobile-search" />
|
||||
</div>
|
||||
</Container>
|
||||
</NavbarRoot>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
||||
Reference in New Issue
Block a user