mirror of
https://github.com/vercel/commerce.git
synced 2025-06-07 16:56:59 +00:00
Add frontend component skeletons and fix build error
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.
This commit is contained in:
parent
c85444b805
commit
531f7bb420
@ -30,11 +30,18 @@ async function getContent(slug: string) {
|
|||||||
return allContent[slug] || null;
|
return allContent[slug] || null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function ContentPage({ params }: { params: { slug: string } }) {
|
// Define an interface for the page's props
|
||||||
|
interface ContentPageProps {
|
||||||
|
params: {
|
||||||
|
slug: string;
|
||||||
|
};
|
||||||
|
// searchParams?: { [key: string]: string | string[] | undefined }; // Optional, if needed
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function ContentPage({ params }: ContentPageProps) {
|
||||||
const content = await getContent(params.slug);
|
const content = await getContent(params.slug);
|
||||||
|
|
||||||
if (!content) {
|
if (!content) {
|
||||||
// Handle case where content is not found, e.g., by returning a 404 or a specific message
|
|
||||||
return <div>Content not found for {params.slug}</div>;
|
return <div>Content not found for {params.slug}</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,6 +46,40 @@ export async function Navbar() {
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
) : null}
|
) : 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>
|
||||||
<div className="hidden justify-center md:flex md:w-1/3">
|
<div className="hidden justify-center md:flex md:w-1/3">
|
||||||
<Suspense fallback={<SearchSkeleton />}>
|
<Suspense fallback={<SearchSkeleton />}>
|
||||||
@ -53,6 +87,8 @@ export async function Navbar() {
|
|||||||
</Suspense>
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end md:w-1/3">
|
<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 />
|
<CartModal />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user