-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: refactor layout structure by creating a new LayoutTemplate com…
…ponent and implement the data fetching layer in the Layout component
- Loading branch information
Showing
7 changed files
with
283 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,12 @@ | ||
| import React from "react" | ||
| import { Metadata } from "next" | ||
| import { getBaseURL } from "@/lib/utils/env" | ||
| import Footer from "@/modules/layout/templates/footer" | ||
| import Nav from "@/modules/layout/templates/nav" | ||
| import LayoutTemplate from "@/modules/layout" | ||
|
|
||
| export const metadata: Metadata = { | ||
| metadataBase: new URL(getBaseURL()), | ||
| } | ||
|
|
||
| export default async function PageLayout(props: { children: React.ReactNode }) { | ||
| return ( | ||
| <> | ||
| <Nav /> | ||
| {props.children} | ||
| <Footer /> | ||
| </> | ||
| ) | ||
| return <LayoutTemplate>{props.children}</LayoutTemplate> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from "react" | ||
| import type { StoreRegion } from "@medusajs/types" | ||
| import { getCategoriesList } from "@/lib/data/categories" | ||
| import { getCollectionsList } from "@/lib/data/collections" | ||
| import { listRegions } from "@/lib/data/regions" | ||
| import Footer from "./templates/footer/footer-1" | ||
| import Header from "./templates/header/header-1" | ||
|
|
||
| interface LayoutTemplateProps { | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| const LayoutTemplate = async ({ children }: LayoutTemplateProps) => { | ||
| const regions = await listRegions().then((regions: StoreRegion[]) => regions) | ||
| const { collections } = await getCollectionsList(0, 6) | ||
| const { product_categories } = await getCategoriesList(0, 6) | ||
|
|
||
| return ( | ||
| <> | ||
| <Header | ||
| regions={regions} | ||
| collections={collections} | ||
| product_categories={product_categories} | ||
| /> | ||
| {children} | ||
| <Footer | ||
| regions={regions} | ||
| collections={collections} | ||
| product_categories={product_categories} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default LayoutTemplate |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| import type { | ||
| StoreCollection, | ||
| StoreProductCategory, | ||
| StoreRegion, | ||
| } from "@medusajs/types" | ||
| import { Text } from "@medusajs/ui" | ||
| import { cn } from "@/lib/utils/cn" | ||
| import LocalizedClientLink from "@/modules/common/components/localized-client-link" | ||
| import MedusaCTA from "@/modules/layout/components/medusa-cta" | ||
|
|
||
| const Footer = ({ | ||
| regions, | ||
| collections, | ||
| product_categories, | ||
| }: { | ||
| collections: StoreCollection[] | ||
| product_categories: StoreProductCategory[] | ||
| regions: StoreRegion[] | ||
| }) => { | ||
| return ( | ||
| <footer className="border-t border-ui-border-base w-full"> | ||
| <div className="content-container flex flex-col w-full"> | ||
| <div className="flex flex-col gap-y-6 xsmall:flex-row items-start justify-between py-40"> | ||
| <div> | ||
| <LocalizedClientLink | ||
| href="/" | ||
| className="txt-compact-xlarge-plus text-ui-fg-subtle hover:text-ui-fg-base uppercase" | ||
| > | ||
| Medusa Store | ||
| </LocalizedClientLink> | ||
| </div> | ||
| <div className="text-small-regular gap-10 md:gap-x-16 grid grid-cols-2 sm:grid-cols-3"> | ||
| {product_categories && product_categories?.length > 0 && ( | ||
| <div className="flex flex-col gap-y-2"> | ||
| <span className="txt-small-plus txt-ui-fg-base"> | ||
| Categories | ||
| </span> | ||
| <ul | ||
| className="grid grid-cols-1 gap-2" | ||
| data-testid="footer-categories" | ||
| > | ||
| {product_categories?.slice(0, 6).map((c) => { | ||
| if (c.parent_category) { | ||
| return | ||
| } | ||
|
|
||
| const children = | ||
| c.category_children?.map((child) => ({ | ||
| name: child.name, | ||
| handle: child.handle, | ||
| id: child.id, | ||
| })) || null | ||
|
|
||
| return ( | ||
| <li | ||
| className="flex flex-col gap-2 text-ui-fg-subtle txt-small" | ||
| key={c.id} | ||
| > | ||
| <LocalizedClientLink | ||
| className={cn( | ||
| "hover:text-ui-fg-base", | ||
| children && "txt-small-plus" | ||
| )} | ||
| href={`/categories/${c.handle}`} | ||
| data-testid="category-link" | ||
| > | ||
| {c.name} | ||
| </LocalizedClientLink> | ||
| {children && ( | ||
| <ul className="grid grid-cols-1 ml-3 gap-2"> | ||
| {children && | ||
| children.map((child) => ( | ||
| <li key={child.id}> | ||
| <LocalizedClientLink | ||
| className="hover:text-ui-fg-base" | ||
| href={`/categories/${child.handle}`} | ||
| data-testid="category-link" | ||
| > | ||
| {child.name} | ||
| </LocalizedClientLink> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| )} | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| </div> | ||
| )} | ||
| {collections && collections.length > 0 && ( | ||
| <div className="flex flex-col gap-y-2"> | ||
| <span className="txt-small-plus txt-ui-fg-base"> | ||
| Collections | ||
| </span> | ||
| <ul | ||
| className={cn( | ||
| "grid grid-cols-1 gap-2 text-ui-fg-subtle txt-small", | ||
| { | ||
| "grid-cols-2": (collections?.length || 0) > 3, | ||
| } | ||
| )} | ||
| > | ||
| {collections?.slice(0, 6).map((c) => ( | ||
| <li key={c.id}> | ||
| <LocalizedClientLink | ||
| className="hover:text-ui-fg-base" | ||
| href={`/collections/${c.handle}`} | ||
| > | ||
| {c.title} | ||
| </LocalizedClientLink> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| )} | ||
| <div className="flex flex-col gap-y-2"> | ||
| <span className="txt-small-plus txt-ui-fg-base">Medusa</span> | ||
| <ul className="grid grid-cols-1 gap-y-2 text-ui-fg-subtle txt-small"> | ||
| <li> | ||
| <a | ||
| href="https://github.com/medusajs" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="hover:text-ui-fg-base" | ||
| > | ||
| GitHub | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="https://docs.medusajs.com" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="hover:text-ui-fg-base" | ||
| > | ||
| Documentation | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="https://github.com/medusajs/nextjs-starter-medusa" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="hover:text-ui-fg-base" | ||
| > | ||
| Source code | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex w-full mb-16 justify-between text-ui-fg-muted"> | ||
| <Text className="txt-compact-small"> | ||
| © {new Date().getFullYear()} Medusa Store. All rights reserved. | ||
| </Text> | ||
| <MedusaCTA /> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ) | ||
| } | ||
|
|
||
| export default Footer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { Suspense } from "react" | ||
| import { | ||
| StoreRegion, | ||
| type StoreCollection, | ||
| type StoreProductCategory, | ||
| } from "@medusajs/types" | ||
| import LocalizedClientLink from "@/modules/common/components/localized-client-link" | ||
| import CartButton from "@/modules/layout/components/cart-button" | ||
| import SideMenu from "@/modules/layout/components/side-menu" | ||
|
|
||
| const Header = ({ | ||
| regions, | ||
| collections, | ||
| product_categories, | ||
| }: { | ||
| collections: StoreCollection[] | ||
| product_categories: StoreProductCategory[] | ||
| regions: StoreRegion[] | ||
| }) => { | ||
| return ( | ||
| <div className="sticky top-0 inset-x-0 z-50 group"> | ||
| <header className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base"> | ||
| <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular"> | ||
| <div className="flex-1 basis-0 h-full flex items-center"> | ||
| <div className="h-full"> | ||
| <SideMenu regions={regions} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex items-center h-full"> | ||
| <LocalizedClientLink | ||
| href="/" | ||
| className="txt-compact-xlarge-plus hover:text-ui-fg-base uppercase" | ||
| data-testid="nav-store-link" | ||
| > | ||
| Medusa Store | ||
| </LocalizedClientLink> | ||
| </div> | ||
|
|
||
| <div className="flex items-center gap-x-6 h-full flex-1 basis-0 justify-end"> | ||
| <div className="hidden small:flex items-center gap-x-6 h-full"> | ||
| {process.env.NEXT_PUBLIC_FEATURE_SEARCH_ENABLED && ( | ||
| <LocalizedClientLink | ||
| className="hover:text-ui-fg-base" | ||
| href="/search" | ||
| scroll={false} | ||
| data-testid="nav-search-link" | ||
| > | ||
| Search | ||
| </LocalizedClientLink> | ||
| )} | ||
| <LocalizedClientLink | ||
| className="hover:text-ui-fg-base" | ||
| href="/account" | ||
| data-testid="nav-account-link" | ||
| > | ||
| Account | ||
| </LocalizedClientLink> | ||
| </div> | ||
| <Suspense | ||
| fallback={ | ||
| <LocalizedClientLink | ||
| className="hover:text-ui-fg-base flex gap-2" | ||
| href="/cart" | ||
| data-testid="nav-cart-link" | ||
| > | ||
| Cart (0) | ||
| </LocalizedClientLink> | ||
| } | ||
| > | ||
| <CartButton /> | ||
| </Suspense> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Header |
This file was deleted.
Oops, something went wrong.