mirror of
https://github.com/LukeHagar/vercel.git
synced 2025-12-09 21:07:46 +00:00
97659c687b
Adds a Hydrogen v2 template which is the output of the `npm create @shopify/hydrogen@latest` command. Note that a `vercel.json` file is being used to define the environment variables that are required at runtime. This is required for the template to deploy with zero configuration, however the user should update these values (including replacing the session secret) and migrate them to the Project settings in the Vercel dashboard. [Live example](https://hydrogen-v2-template.vercel.app)
100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
import {useMatches, NavLink} from '@remix-run/react';
|
|
import type {FooterQuery} from 'storefrontapi.generated';
|
|
|
|
export function Footer({menu}: FooterQuery) {
|
|
return (
|
|
<footer className="footer">
|
|
<FooterMenu menu={menu} />
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
function FooterMenu({menu}: Pick<FooterQuery, 'menu'>) {
|
|
const [root] = useMatches();
|
|
const publicStoreDomain = root?.data?.publicStoreDomain;
|
|
return (
|
|
<nav className="footer-menu" role="navigation">
|
|
{(menu || FALLBACK_FOOTER_MENU).items.map((item) => {
|
|
if (!item.url) return null;
|
|
// if the url is internal, we strip the domain
|
|
const url =
|
|
item.url.includes('myshopify.com') ||
|
|
item.url.includes(publicStoreDomain)
|
|
? new URL(item.url).pathname
|
|
: item.url;
|
|
const isExternal = !url.startsWith('/');
|
|
return isExternal ? (
|
|
<a href={url} key={item.id} rel="noopener noreferrer" target="_blank">
|
|
{item.title}
|
|
</a>
|
|
) : (
|
|
<NavLink
|
|
end
|
|
key={item.id}
|
|
prefetch="intent"
|
|
style={activeLinkStyle}
|
|
to={url}
|
|
>
|
|
{item.title}
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
const FALLBACK_FOOTER_MENU = {
|
|
id: 'gid://shopify/Menu/199655620664',
|
|
items: [
|
|
{
|
|
id: 'gid://shopify/MenuItem/461633060920',
|
|
resourceId: 'gid://shopify/ShopPolicy/23358046264',
|
|
tags: [],
|
|
title: 'Privacy Policy',
|
|
type: 'SHOP_POLICY',
|
|
url: '/policies/privacy-policy',
|
|
items: [],
|
|
},
|
|
{
|
|
id: 'gid://shopify/MenuItem/461633093688',
|
|
resourceId: 'gid://shopify/ShopPolicy/23358013496',
|
|
tags: [],
|
|
title: 'Refund Policy',
|
|
type: 'SHOP_POLICY',
|
|
url: '/policies/refund-policy',
|
|
items: [],
|
|
},
|
|
{
|
|
id: 'gid://shopify/MenuItem/461633126456',
|
|
resourceId: 'gid://shopify/ShopPolicy/23358111800',
|
|
tags: [],
|
|
title: 'Shipping Policy',
|
|
type: 'SHOP_POLICY',
|
|
url: '/policies/shipping-policy',
|
|
items: [],
|
|
},
|
|
{
|
|
id: 'gid://shopify/MenuItem/461633159224',
|
|
resourceId: 'gid://shopify/ShopPolicy/23358079032',
|
|
tags: [],
|
|
title: 'Terms of Service',
|
|
type: 'SHOP_POLICY',
|
|
url: '/policies/terms-of-service',
|
|
items: [],
|
|
},
|
|
],
|
|
};
|
|
|
|
function activeLinkStyle({
|
|
isActive,
|
|
isPending,
|
|
}: {
|
|
isActive: boolean;
|
|
isPending: boolean;
|
|
}) {
|
|
return {
|
|
fontWeight: isActive ? 'bold' : '',
|
|
color: isPending ? 'grey' : 'white',
|
|
};
|
|
}
|