crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-09-07 16:30:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: Improved menu

Browse Source
This commit is contained in:
Sol Irvine
2023-08-19 15:37:47 +09:00
parent 3bb6be36ac
commit 1e489b1790
17 changed files with 153 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/layout/about-narai-preview.tsx Normal file
View File

@@ -0,0 +1,18 @@
'use client';
import { useTranslations } from 'next-intl';
export default function AboutNaraiPreview() {
const t = useTranslations('Index');
return (
<div className="flex flex-row space-x-2 p-24">
<div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
<div className="text-5xl">{t('home.previews.about-narai.title')}</div>
<div className="text-5xl">{t('home.previews.about-narai.subtitle')}</div>
</div>
<div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
<div>{t('home.previews.about-narai.body')}</div>
</div>
</div>
);
}

9
components/layout/footer.tsx
View File

@@ -1,15 +1,16 @@
import clsx from 'clsx';
import Cart from 'components/cart';
import CartModal from 'components/cart/modal';
import FacebookIcon from 'components/icons/facebook';
import InstagramIcon from 'components/icons/instagram';
import KanjiLogo from 'components/icons/kanji';
import { Cart } from 'lib/shopify/types';
import Link from 'next/link';
import FooterMenu from './footer-menu';
import NewsletterFooter from './newsletter-footer';
const { COMPANY_NAME, SITE_NAME } = process.env;
export default async function Footer() {
export default async function Footer({ cart }: { cart?: Cart }) {
const currentYear = new Date().getFullYear();
const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
const copyrightName = COMPANY_NAME || SITE_NAME || '';
@@ -18,7 +19,7 @@ export default async function Footer() {
<footer className="px-6 text-sm">
<div
className={clsx(
'mx-auto flex w-full max-w-screen-2xl justify-between',
'mx-auto flex w-full max-w-screen-xl justify-between',
'flex-col gap-6 py-12',
'border-t border-subtle',
'text-sm md:flex-row md:gap-12'
@@ -47,7 +48,7 @@ export default async function Footer() {
<FooterMenu />
<div className="flex flex-col space-y-2">
<div className="flex flex-row justify-between space-x-4">
<Cart />
<CartModal cart={cart} />
<div className="flex flex-row items-center space-x-6">
<Link href="https://www.instagram.com/suginomoribrewery/" className="group">
<InstagramIcon className="h-8 stroke-transparent transition-all ease-in-out group-hover:scale-110" />

2
components/layout/menu/modal.tsx
View File

@@ -56,7 +56,7 @@ export function MenuModal() {
>
<div className="fixed inset-0 z-30 backdrop-blur-sm">
<Dialog.Panel>
<div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-11">
<div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-6">
<div className="flex flex-row space-x-6">
<LanguageControl lang={locale as SupportedLocale} />

70
components/layout/navbar/index.tsx
View File

@@ -1,19 +1,63 @@
import Cart from 'components/cart';
import OpenCart from 'components/cart/open-cart';
import { Suspense } from 'react';
import { MenuModal } from '../menu/modal';
'use client';
import clsx from 'clsx';
import CartModal from 'components/cart/modal';
import OpenCart from 'components/cart/open-cart';
import LogoNamemark from 'components/icons/namemark';
import { Cart } from 'lib/shopify/types';
import { Suspense } from 'react';
import { useInView } from 'react-intersection-observer';
import { MenuModal } from '../menu/modal';
import { LanguageControl, SupportedLocale } from './language-control';
export default function Navbar({ cart, locale }: { cart?: Cart; locale?: SupportedLocale }) {
const { ref, inView, entry } = useInView({
threshold: 0,
initialInView: true
});
export default async function Navbar() {
return (
<nav className="fixed right-0 top-6 z-10 md:top-12">
<div className="flex justify-end pr-5">
<Suspense fallback={<OpenCart />}>
<div className="flex flex-col-reverse items-center justify-center space-y-2 rounded bg-dark/40 px-2 backdrop-blur-sm md:flex-row md:space-x-6">
<Cart />
<MenuModal />
<div ref={ref}>
{!!ref && !inView && (
<div className="fixed left-1/2 top-0 z-20 w-full max-w-screen-xl -translate-x-1/2 animate-fadeIn bg-dark/40 px-6 py-2 backdrop-blur-sm">
<div className="mx-auto flex max-w-screen-xl flex-row items-center justify-between">
<div className={clsx('')}>
<LogoNamemark
className={clsx('w-[260px]', 'fill-current transition-all duration-150')}
/>
</div>
<nav className="flex flex-row items-center space-x-4">
<Suspense fallback={<OpenCart />}>
<div className="flex flex-col-reverse items-center justify-center space-y-2 px-2 md:flex-row md:space-x-6">
<CartModal cart={cart} />
<MenuModal />
</div>
</Suspense>
</nav>
</div>
</Suspense>
</div>
)}
<div
className={clsx('mx-auto flex max-w-screen-xl flex-row items-start justify-between px-6')}
>
<div>
<LogoNamemark
className={clsx(
inView ? 'w-[260px] md:w-[600px]' : 'w-[260px] md:w-[260px]',
'fill-current pt-12 transition-all duration-150'
)}
/>
</div>
<nav className="flex flex-row space-x-4 pt-6">
<LanguageControl lang={locale} />
<Suspense fallback={<OpenCart />}>
<div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6">
<CartModal cart={cart} />
<MenuModal />
</div>
</Suspense>
</nav>
</div>
</nav>
</div>
);
}

2
components/layout/shoplist.tsx
View File

@@ -6,7 +6,7 @@ import Link from 'next/link';
export default function Shoplist() {
const t = useTranslations('Index');
return (
<div className="mx-auto max-w-screen-2xl space-y-4 px-6" id="shops">
<div className="mx-auto max-w-screen-xl space-y-4 px-6" id="shops">
<div className="flex w-full flex-row items-baseline space-x-12 pb-6">
<h2 className="font-serif text-6xl tracking-wider">shop list</h2>
<h3 className="font-multilingual text-2xl font-extralight tracking-wider">