crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 07:56:59 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.yarn/cache/react-intersection-observer-npm-9.5.2-2c006290a0-cdbe405449.zip vendored Normal file
View File

Binary file not shown.

14
app/[locale]/layout.tsx
View File

@ -1,4 +1,3 @@
import Navbar from 'components/layout/navbar';
import { Noto_Serif_JP } from 'next/font/google'; import { Noto_Serif_JP } from 'next/font/google';
import localFont from 'next/font/local'; import localFont from 'next/font/local';
import { ReactNode, Suspense } from 'react'; import { ReactNode, Suspense } from 'react';
@ -84,14 +83,11 @@ export default async function RootLayout({
return ( return (
<html lang={params.locale} className={`${cinzel.variable} ${alpina.variable} ${noto.variable}`}> <html lang={params.locale} className={`${cinzel.variable} ${alpina.variable} ${noto.variable}`}>
<body className="bg-dark text-white selection:bg-green-800 selection:text-green-400"> <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
<div className="mx-auto max-w-screen-2xl"> <NextIntlClientProvider locale={params?.locale} messages={messages}>
<NextIntlClientProvider locale={params?.locale} messages={messages}> <Suspense>
<Navbar /> <main>{children}</main>
<Suspense> </Suspense>
<main>{children}</main> </NextIntlClientProvider>
</Suspense>
</NextIntlClientProvider>
</div>
</body> </body>
</html> </html>
); );

44
app/[locale]/page.tsx
View File

@ -1,16 +1,20 @@
import { Carousel } from 'components/carousel'; import { Carousel } from 'components/carousel';
import { ThreeItemGrid } from 'components/grid/three-items'; import { ThreeItemGrid } from 'components/grid/three-items';
import Footer from 'components/layout/footer'; import Footer from 'components/layout/footer';
import { LanguageControl, SupportedLocale } from 'components/layout/navbar/language-control'; import { SupportedLocale } from 'components/layout/navbar/language-control';
import clsx from 'clsx'; import clsx from 'clsx';
import LogoNamemark from 'components/icons/namemark'; import AboutNaraiPreview from 'components/layout/about-narai-preview';
import Navbar from 'components/layout/navbar';
import NewsletterSignup from 'components/layout/newsletter-signup'; import NewsletterSignup from 'components/layout/newsletter-signup';
import Shoplist from 'components/layout/shoplist'; import Shoplist from 'components/layout/shoplist';
import { getCart } from 'lib/shopify';
import { cookies } from 'next/headers';
import Image from 'next/image'; import Image from 'next/image';
import { Suspense } from 'react'; import { Suspense } from 'react';
import HomeImage001 from './images/home-image-001.webp'; import HomeImage001 from './images/home-image-001.webp';
import HomeImage002 from './images/home-image-002.webp'; import HomeImage002 from './images/home-image-002.webp';
import HomeImage003 from './images/home-image-003.webp';
export const runtime = 'edge'; export const runtime = 'edge';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
@ -28,19 +32,23 @@ export default async function HomePage({
}: { }: {
params: { locale?: SupportedLocale }; params: { locale?: SupportedLocale };
}) { }) {
const cartId = cookies().get('cartId')?.value;
let cart;
if (cartId) {
cart = await getCart(cartId);
}
return ( return (
<> <div className="relative h-screen overflow-scroll">
<div className="invisible absolute right-40 top-12 md:visible"> <Navbar cart={cart} locale={locale} />
<LanguageControl lang={locale} /> <div className="pt-48">
<ThreeItemGrid lang={locale} />
</div> </div>
<div className="px-6 pb-12 pt-6 md:pb-48 md:pl-6 md:pt-12">
<LogoNamemark className="w-[260px] fill-current md:w-[600px]" />
</div>
<ThreeItemGrid lang={locale} />
<div className="py-48"> <div className="py-48">
<NewsletterSignup /> <NewsletterSignup />
</div> </div>
<div className="relative max-w-screen-2xl"> <div className="relative mx-auto max-w-screen-xl">
<Image <Image
src={HomeImage001} src={HomeImage001}
priority={true} priority={true}
@ -51,7 +59,7 @@ export default async function HomePage({
<div className="py-24"> <div className="py-24">
<Shoplist /> <Shoplist />
</div> </div>
<div className="max-w-screen-4xl relative"> <div className="relative pb-48">
<Image <Image
src={HomeImage002} src={HomeImage002}
priority={true} priority={true}
@ -59,12 +67,22 @@ export default async function HomePage({
className={clsx('h-full w-full object-cover')} className={clsx('h-full w-full object-cover')}
/> />
</div> </div>
<div className="relative mx-auto max-w-screen-xl">
<Image
src={HomeImage003}
priority={true}
alt="A picture of mountain stream water on a log, next to a rock."
className={clsx('h-full w-full object-cover')}
/>
<AboutNaraiPreview />
</div>
<Suspense> <Suspense>
<Carousel /> <Carousel />
<Suspense> <Suspense>
<Footer /> <Footer cart={cart} />
</Suspense> </Suspense>
</Suspense> </Suspense>
</> </div>
); );
} }

2
app/[locale]/product/[handle]/page.tsx
View File

@ -81,7 +81,7 @@ export default async function ProductPage({ params }: { params: { handle: string
__html: JSON.stringify(productJsonLd) __html: JSON.stringify(productJsonLd)
}} }}
/> />
<div className="mx-auto max-w-screen-2xl px-4"> <div className="mx-auto max-w-screen-xl px-4">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row"> <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row">
<div className="h-full w-full basis-full lg:basis-4/6"> <div className="h-full w-full basis-full lg:basis-4/6">
<Gallery <Gallery

2
app/[locale]/search/layout.tsx
View File

@ -7,7 +7,7 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) { export default function SearchLayout({ children }: { children: React.ReactNode }) {
return ( return (
<Suspense> <Suspense>
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row"> <div className="mx-auto flex max-w-screen-xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
<div className="order-first w-full flex-none md:max-w-[125px]"> <div className="order-first w-full flex-none md:max-w-[125px]">
<Collections /> <Collections />
</div> </div>

2
app/[locale]/shop-list/layout.tsx
View File

@ -5,7 +5,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<Suspense> <Suspense>
<div className="w-full"> <div className="w-full">
<div className="mx-8 max-w-screen-2xl py-20 sm:mx-auto"> <div className="mx-8 max-w-screen-xl py-20 sm:mx-auto">
<Suspense>{children}</Suspense> <Suspense>{children}</Suspense>
</div> </div>
</div> </div>

2
app/[locale]/shop-list/page.tsx
View File

@ -37,7 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
if (!page) return notFound(); if (!page) return notFound();
return ( return (
<div className="font-multilingual mx-auto min-h-screen max-w-screen-2xl px-4 text-white"> <div className="font-multilingual mx-auto min-h-screen max-w-screen-xl px-4 text-white">
<div className="pb-12"> <div className="pb-12">
<LogoNamemark className="w-[260px] fill-current md:w-[320px]" /> <LogoNamemark className="w-[260px] fill-current md:w-[320px]" />
</div> </div>

2
components/grid/three-items.tsx
View File

@ -49,7 +49,7 @@ export async function ThreeItemGrid({ lang }: { lang?: SupportedLocale }) {
return ( return (
<section <section
className={clsx( className={clsx(
'mx-auto grid max-w-screen-2xl gap-6 px-4 pb-4 ', 'mx-auto grid max-w-screen-xl gap-6 px-4 pb-4 ',
'grid-cols-1 md:grid-cols-6', 'grid-cols-1 md:grid-cols-6',
'grid-rows-3 md:grid-rows-1' 'grid-rows-3 md:grid-rows-1'
)} )}

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

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

@ -1,19 +1,63 @@
import Cart from 'components/cart'; 'use client';
import OpenCart from 'components/cart/open-cart';
import { Suspense } from 'react'; import clsx from 'clsx';
import { MenuModal } from '../menu/modal'; 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 ( return (
<nav className="fixed right-0 top-6 z-10 md:top-12"> <div ref={ref}>
<div className="flex justify-end pr-5"> {!!ref && !inView && (
<Suspense fallback={<OpenCart />}> <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="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"> <div className="mx-auto flex max-w-screen-xl flex-row items-center justify-between">
<Cart /> <div className={clsx('')}>
<MenuModal /> <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> </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> </div>
</nav> </div>
); );
} }

2
components/layout/shoplist.tsx
View File

@ -6,7 +6,7 @@ import Link from 'next/link';
export default function Shoplist() { export default function Shoplist() {
const t = useTranslations('Index'); const t = useTranslations('Index');
return ( 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"> <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> <h2 className="font-serif text-6xl tracking-wider">shop list</h2>
<h3 className="font-multilingual text-2xl font-extralight tracking-wider"> <h3 className="font-multilingual text-2xl font-extralight tracking-wider">

9
messages/en.json
View File

@ -24,6 +24,15 @@
"placeholder": "Email", "placeholder": "Email",
"button": "Notify me" "button": "Notify me"
}, },
"home": {
"previews": {
"about-narai": {
"title": "water of the mountains,",
"subtitle": "sake of the skies",
"body": "We brew our sake in one of the highest breweries in Japan, standing at an altitude of 940m and surrounded by an abundance of nature. While many breweries typically use a stable water source such as well water, narai uses the fresh water from the mountains, flowing from an altitude of over 1,000m. The water originates from a spring near the watershed of the Shinano River and Kiso River, and is characterized by its clarity and smooth, rounded texture brought about by a rare “water hardness” of less than 25."
}
}
},
"shops": { "shops": {
"title": "Shop list", "title": "Shop list",
"subtitle": "", "subtitle": "",

9
messages/ja.json
View File

@ -24,6 +24,15 @@
"placeholder": "メールアドレス", "placeholder": "メールアドレス",
"button": "登録する" "button": "登録する"
}, },
"home": {
"previews": {
"about-narai": {
"title": "山の水、",
"subtitle": "空に一番近い酒",
"body": "標高約940mの日本でも有数の空に近い自然豊かな環境で醸造しています。多くの酒蔵が水の性質が安定している井戸水を使用しますが、naraiは標高1,000m以上から流れる天然の山水を使用。信濃川と木曽川の分水嶺付近の湧き水であるこの山水は、日本でも有数な「硬度25以下」の透明感と丸みのある滑らかな舌触りが特徴です。"
}
}
},
"shops": { "shops": {
"title": "取り扱い店", "title": "取り扱い店",
"subtitle": "取り扱い店", "subtitle": "取り扱い店",

3
package.json
View File

@ -34,7 +34,8 @@
"next-intl": "latest", "next-intl": "latest",
"prettier-plugin-organize-imports": "^3.2.3", "prettier-plugin-organize-imports": "^3.2.3",
"react": "latest", "react": "latest",
"react-dom": "latest" "react-dom": "latest",
"react-intersection-observer": "^9.5.2"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/container-queries": "^0.1.1",

10
yarn.lock
View File

@ -1294,6 +1294,7 @@ __metadata:
prettier-plugin-tailwindcss: ^0.4.1 prettier-plugin-tailwindcss: ^0.4.1
react: latest react: latest
react-dom: latest react-dom: latest
react-intersection-observer: ^9.5.2
tailwindcss: ^3.3.3 tailwindcss: ^3.3.3
typescript: 5.1.6 typescript: 5.1.6
languageName: unknown languageName: unknown
@ -4127,6 +4128,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"react-intersection-observer@npm:^9.5.2":
version: 9.5.2
resolution: "react-intersection-observer@npm:9.5.2"
peerDependencies:
react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
checksum: cdbe40544930d59fc3820bce017fb688910cbecd7baaf382387a3d60d98a36e1d1e4bc27a876775e99b2a9f86762286a29d7bca21f3345f653cff29850c2641d
languageName: node
linkType: hard
"react-is@npm:^16.13.1": "react-is@npm:^16.13.1":
version: 16.13.1 version: 16.13.1
resolution: "react-is@npm:16.13.1" resolution: "react-is@npm:16.13.1"