mirror of
https://github.com/vercel/commerce.git
synced 2025-06-07 16:56:59 +00:00
render shopify and cusotm logo conditionnaly
This commit is contained in:
Guillaume Bibeau-Laviolette
parent
6bdf0a216c
commit
4f71b2f017
6
packages/shopify/src/brand/index.ts
Normal file
6
packages/shopify/src/brand/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import type { Brand } from '@vercel/commerce/types'
|
||||
import { Logo } from './logo'
|
||||
|
||||
export const brand: Brand.Config = {
|
||||
Logo,
|
||||
}
|
||||
13
packages/shopify/src/brand/logo.tsx
Normal file
13
packages/shopify/src/brand/logo.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
export const Logo = ({ className = '', ...props }) => (
|
||||
<svg
|
||||
height={32}
|
||||
width={32}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 89 101"
|
||||
>
|
||||
<path
|
||||
fill="var(--primary)"
|
||||
d="M63.305 100.258l25.313-6.29S77.719 20.285 77.65 19.779c-.07-.505-.511-.786-.878-.816-.364-.03-7.49-.14-7.49-.14s-4.344-4.218-5.977-5.815v87.25zM60.55 12.167l-2.994.927a20.986 20.986 0 00-1.433-3.521c-2.122-4.05-5.23-6.191-8.985-6.197h-.014c-.261 0-.52.025-.78.048a11.357 11.357 0 00-.34-.392C44.37 1.282 42.273.43 39.76.505c-4.85.138-9.68 3.64-13.596 9.862-2.755 4.377-4.852 9.876-5.446 14.134-5.568 1.724-9.462 2.93-9.548 2.958-2.811.883-2.9.969-3.267 3.619C7.627 33.08.273 89.947.273 89.947L61.289 100.5V12.042c-.3.02-.57.075-.74.125zM46.46 16.53l-10.29 3.185c.994-3.807 2.88-7.598 5.197-10.084.86-.925 2.066-1.955 3.494-2.544 1.34 2.8 1.633 6.763 1.6 9.443zM39.853 3.732c1.139-.025 2.097.225 2.916.764-1.31.68-2.577 1.658-3.766 2.932-3.08 3.305-5.44 8.435-6.382 13.384-2.936.909-5.808 1.8-8.452 2.617 1.67-7.79 8.199-19.48 15.684-19.697zM30.418 48.11c.328 5.19 13.984 6.324 14.75 18.483.603 9.565-5.073 16.109-13.253 16.625-9.818.62-15.222-5.174-15.222-5.174l2.08-8.851s5.44 4.105 9.796 3.83c2.844-.18 3.86-2.494 3.757-4.13-.427-6.771-11.548-6.371-12.25-17.497-.592-9.363 5.557-18.85 19.124-19.706 5.227-.33 7.905 1.006 7.905 1.006l-3.103 11.606s-3.46-1.575-7.562-1.316c-6.019.38-6.083 4.174-6.022 5.124zm19.267-32.578c-.036-2.455-.328-5.872-1.472-8.824 3.68.697 5.49 4.86 6.257 7.343-1.42.437-3.036.936-4.785 1.48z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -1,5 +1,7 @@
|
||||
import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
|
||||
|
||||
import { brand } from './brand'
|
||||
|
||||
import { handler as useCart } from './cart/use-cart'
|
||||
import { handler as useAddItem } from './cart/use-add-item'
|
||||
import { handler as useUpdateItem } from './cart/use-update-item'
|
||||
@ -16,6 +18,7 @@ import fetcher from './fetcher'
|
||||
|
||||
export const shopifyProvider = {
|
||||
locale: 'en-us',
|
||||
brand,
|
||||
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||
fetcher,
|
||||
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.logo {
|
||||
@apply cursor-pointer rounded-full border transform duration-100 ease-in-out;
|
||||
@apply cursor-pointer rounded-full transform duration-100 ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply shadow-md;
|
||||
|
||||
@ -4,6 +4,7 @@ import s from './Navbar.module.css'
|
||||
import NavbarRoot from './NavbarRoot'
|
||||
import { Logo, Container } from '@components/ui'
|
||||
import { Searchbar, UserNav } from '@components/common'
|
||||
import { brand } from '@framework/brand'
|
||||
|
||||
interface Link {
|
||||
href: string
|
||||
@ -13,44 +14,45 @@ interface Link {
|
||||
interface NavbarProps {
|
||||
links?: Link[]
|
||||
}
|
||||
|
||||
const Navbar: FC<NavbarProps> = ({ links }) => (
|
||||
<NavbarRoot>
|
||||
<Container clean className="mx-auto max-w-8xl px-6">
|
||||
<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>
|
||||
const Navbar: FC<NavbarProps> = ({ links }) => {
|
||||
return (
|
||||
<NavbarRoot>
|
||||
<Container clean className="mx-auto max-w-8xl px-6">
|
||||
<div className={s.nav}>
|
||||
<div className="flex items-center flex-1">
|
||||
<Link href="/">
|
||||
<a className={s.logo} aria-label="Logo">
|
||||
{brand.Logo ? <brand.Logo /> : <Logo />}
|
||||
</a>
|
||||
</Link>
|
||||
{links?.map((l) => (
|
||||
<Link href={l.href} key={l.href}>
|
||||
<a className={s.link}>{l.label}</a>
|
||||
<nav className={s.navMenu}>
|
||||
<Link href="/search">
|
||||
<a className={s.link}>All</a>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
{links?.map((l) => (
|
||||
<Link href={l.href} key={l.href}>
|
||||
<a className={s.link}>{l.label}</a>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
{process.env.COMMERCE_SEARCH_ENABLED && (
|
||||
<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>
|
||||
{process.env.COMMERCE_SEARCH_ENABLED && (
|
||||
<div className="justify-center flex-1 hidden lg:flex">
|
||||
<Searchbar />
|
||||
<div className="flex pb-4 lg:px-6 lg:hidden">
|
||||
<Searchbar id="mobile-search" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-end flex-1 space-x-8">
|
||||
<UserNav />
|
||||
</div>
|
||||
</div>
|
||||
{process.env.COMMERCE_SEARCH_ENABLED && (
|
||||
<div className="flex pb-4 lg:px-6 lg:hidden">
|
||||
<Searchbar id="mobile-search" />
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
</NavbarRoot>
|
||||
)
|
||||
</Container>
|
||||
</NavbarRoot>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user