crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +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

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 localFont from 'next/font/local';
import { ReactNode, Suspense } from 'react';
@@ -84,14 +83,11 @@ export default async function RootLayout({
return (
<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">
<div className="mx-auto max-w-screen-2xl">
<NextIntlClientProvider locale={params?.locale} messages={messages}>
<Navbar />
<Suspense>
<main>{children}</main>
</Suspense>
</NextIntlClientProvider>
</div>
<NextIntlClientProvider locale={params?.locale} messages={messages}>
<Suspense>
<main>{children}</main>
</Suspense>
</NextIntlClientProvider>
</body>
</html>
);

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

@@ -1,16 +1,20 @@
import { Carousel } from 'components/carousel';
import { ThreeItemGrid } from 'components/grid/three-items';
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 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 Shoplist from 'components/layout/shoplist';
import { getCart } from 'lib/shopify';
import { cookies } from 'next/headers';
import Image from 'next/image';
import { Suspense } from 'react';
import HomeImage001 from './images/home-image-001.webp';
import HomeImage002 from './images/home-image-002.webp';
import HomeImage003 from './images/home-image-003.webp';
export const runtime = 'edge';
const { SITE_NAME } = process.env;
@@ -28,19 +32,23 @@ export default async function HomePage({
}: {
params: { locale?: SupportedLocale };
}) {
const cartId = cookies().get('cartId')?.value;
let cart;
if (cartId) {
cart = await getCart(cartId);
}
return (
<>
<div className="invisible absolute right-40 top-12 md:visible">
<LanguageControl lang={locale} />
<div className="relative h-screen overflow-scroll">
<Navbar cart={cart} locale={locale} />
<div className="pt-48">
<ThreeItemGrid lang={locale} />
</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">
<NewsletterSignup />
</div>
<div className="relative max-w-screen-2xl">
<div className="relative mx-auto max-w-screen-xl">
<Image
src={HomeImage001}
priority={true}
@@ -51,7 +59,7 @@ export default async function HomePage({
<div className="py-24">
<Shoplist />
</div>
<div className="max-w-screen-4xl relative">
<div className="relative pb-48">
<Image
src={HomeImage002}
priority={true}
@@ -59,12 +67,22 @@ export default async function HomePage({
className={clsx('h-full w-full object-cover')}
/>
</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>
<Carousel />
<Suspense>
<Footer />
<Footer cart={cart} />
</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)
}}
/>
<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="h-full w-full basis-full lg:basis-4/6">
<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 }) {
return (
<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]">
<Collections />
</div>

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

@@ -5,7 +5,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
return (
<Suspense>
<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>
</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();
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">
<LogoNamemark className="w-[260px] fill-current md:w-[320px]" />
</div>