mirror of
https://github.com/vercel/commerce.git
synced 2025-06-07 16:56:59 +00:00
531f7bb420
This commit introduces the initial skeleton structure for several frontend pages as per the e-commerce starter kit plan: - Home Page: Modified to support CMS-configurable sections (mocked). - Content Pages: Added dynamic route for CMS-based content (mocked). - Product Detail Page: Displays product information (mocked). - Product List/Category Page: Displays products with mock filters/search. - Search Page: Implements mock Relewise-powered search. - Login Page: Basic login form structure. - My Page: Sections for orders, quotes, downloads, profile (mocked). - Cart & Checkout Page: Cart management and checkout form structure (mocked). Additionally, this commit includes: - A fix for a TypeScript type error in `app/content/[slug]/page.tsx` related to `PageProps` by introducing an explicit `ContentPageProps` interface. - Addition of basic navigation links in the main navbar to improve site traversability.
98 lines
4.0 KiB
TypeScript
98 lines
4.0 KiB
TypeScript
import CartModal from 'components/cart/modal';
|
|
import LogoSquare from 'components/logo-square';
|
|
import { getMenu } from 'lib/shopify';
|
|
import { Menu } from 'lib/shopify/types';
|
|
import Link from 'next/link';
|
|
import { Suspense } from 'react';
|
|
import MobileMenu from './mobile-menu';
|
|
import Search, { SearchSkeleton } from './search';
|
|
|
|
const { SITE_NAME } = process.env;
|
|
|
|
export async function Navbar() {
|
|
const menu = await getMenu('next-js-frontend-header-menu');
|
|
|
|
return (
|
|
<nav className="relative flex items-center justify-between p-4 lg:px-6">
|
|
<div className="block flex-none md:hidden">
|
|
<Suspense fallback={null}>
|
|
<MobileMenu menu={menu} />
|
|
</Suspense>
|
|
</div>
|
|
<div className="flex w-full items-center">
|
|
<div className="flex w-full md:w-1/3">
|
|
<Link
|
|
href="/"
|
|
prefetch={true}
|
|
className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
|
|
>
|
|
<LogoSquare />
|
|
<div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
|
|
{SITE_NAME}
|
|
</div>
|
|
</Link>
|
|
{menu.length ? (
|
|
<ul className="hidden gap-6 text-sm md:flex md:items-center">
|
|
{menu.map((item: Menu) => (
|
|
<li key={item.title}>
|
|
<Link
|
|
href={item.path}
|
|
prefetch={true}
|
|
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : null}
|
|
{/* Static links for newly added pages */}
|
|
<ul className="hidden gap-6 text-sm md:flex md:items-center ml-6">
|
|
<li>
|
|
<Link href="/search/t-shirts" prefetch={true} className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300">
|
|
Products
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/content/about-us" prefetch={true} className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300">
|
|
About Us
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/content/contact-us" prefetch={true} className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300">
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/login" prefetch={true} className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300">
|
|
Login
|
|
</Link>
|
|
</li>
|
|
{/* My Page link - should be conditional based on login status */}
|
|
<li>
|
|
<Link href="/my-page" prefetch={true} className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300">
|
|
My Page
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/cart-checkout" prefetch={true} className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300">
|
|
Cart Page
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="hidden justify-center md:flex md:w-1/3">
|
|
<Suspense fallback={<SearchSkeleton />}>
|
|
<Search />
|
|
</Suspense>
|
|
</div>
|
|
<div className="flex justify-end md:w-1/3">
|
|
{/* The existing CartModal is likely the cart icon and flyout. We keep this. */}
|
|
{/* The "Cart Page" link above is for a dedicated cart page view. */}
|
|
<CartModal />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|