move selfservice tables to medreport schema
add base medusa store frontend
This commit is contained in:
Danel Kungla
@@ -0,0 +1,8 @@
|
||||
import { retrieveCart } from "@lib/data/cart"
|
||||
import CartDropdown from "../cart-dropdown"
|
||||
|
||||
export default async function CartButton() {
|
||||
const cart = await retrieveCart().catch(() => null)
|
||||
|
||||
return <CartDropdown cart={cart} />
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel,
|
||||
Transition,
|
||||
} from "@headlessui/react"
|
||||
import { convertToLocale } from "@lib/util/money"
|
||||
import { HttpTypes } from "@medusajs/types"
|
||||
import { Button } from "@medusajs/ui"
|
||||
import DeleteButton from "@modules/common/components/delete-button"
|
||||
import LineItemOptions from "@modules/common/components/line-item-options"
|
||||
import LineItemPrice from "@modules/common/components/line-item-price"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import Thumbnail from "@modules/products/components/thumbnail"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { Fragment, useEffect, useRef, useState } from "react"
|
||||
|
||||
const CartDropdown = ({
|
||||
cart: cartState,
|
||||
}: {
|
||||
cart?: HttpTypes.StoreCart | null
|
||||
}) => {
|
||||
const [activeTimer, setActiveTimer] = useState<NodeJS.Timer | undefined>(
|
||||
undefined
|
||||
)
|
||||
const [cartDropdownOpen, setCartDropdownOpen] = useState(false)
|
||||
|
||||
const open = () => setCartDropdownOpen(true)
|
||||
const close = () => setCartDropdownOpen(false)
|
||||
|
||||
const totalItems =
|
||||
cartState?.items?.reduce((acc, item) => {
|
||||
return acc + item.quantity
|
||||
}, 0) || 0
|
||||
|
||||
const subtotal = cartState?.subtotal ?? 0
|
||||
const itemRef = useRef<number>(totalItems || 0)
|
||||
|
||||
const timedOpen = () => {
|
||||
open()
|
||||
|
||||
const timer = setTimeout(close, 5000)
|
||||
|
||||
setActiveTimer(timer)
|
||||
}
|
||||
|
||||
const openAndCancel = () => {
|
||||
if (activeTimer) {
|
||||
clearTimeout(activeTimer)
|
||||
}
|
||||
|
||||
open()
|
||||
}
|
||||
|
||||
// Clean up the timer when the component unmounts
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (activeTimer) {
|
||||
clearTimeout(activeTimer)
|
||||
}
|
||||
}
|
||||
}, [activeTimer])
|
||||
|
||||
const pathname = usePathname()
|
||||
|
||||
// open cart dropdown when modifying the cart items, but only if we're not on the cart page
|
||||
useEffect(() => {
|
||||
if (itemRef.current !== totalItems && !pathname.includes("/cart")) {
|
||||
timedOpen()
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [totalItems, itemRef.current])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="h-full z-50"
|
||||
onMouseEnter={openAndCancel}
|
||||
onMouseLeave={close}
|
||||
>
|
||||
<Popover className="relative h-full">
|
||||
<PopoverButton className="h-full">
|
||||
<LocalizedClientLink
|
||||
className="hover:text-ui-fg-base"
|
||||
href="/cart"
|
||||
data-testid="nav-cart-link"
|
||||
>{`Cart (${totalItems})`}</LocalizedClientLink>
|
||||
</PopoverButton>
|
||||
<Transition
|
||||
show={cartDropdownOpen}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<PopoverPanel
|
||||
static
|
||||
className="hidden small:block absolute top-[calc(100%+1px)] right-0 bg-white border-x border-b border-gray-200 w-[420px] text-ui-fg-base"
|
||||
data-testid="nav-cart-dropdown"
|
||||
>
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<h3 className="text-large-semi">Cart</h3>
|
||||
</div>
|
||||
{cartState && cartState.items?.length ? (
|
||||
<>
|
||||
<div className="overflow-y-scroll max-h-[402px] px-4 grid grid-cols-1 gap-y-8 no-scrollbar p-px">
|
||||
{cartState.items
|
||||
.sort((a, b) => {
|
||||
return (a.created_at ?? "") > (b.created_at ?? "")
|
||||
? -1
|
||||
: 1
|
||||
})
|
||||
.map((item) => (
|
||||
<div
|
||||
className="grid grid-cols-[122px_1fr] gap-x-4"
|
||||
key={item.id}
|
||||
data-testid="cart-item"
|
||||
>
|
||||
<LocalizedClientLink
|
||||
href={`/products/${item.product_handle}`}
|
||||
className="w-24"
|
||||
>
|
||||
<Thumbnail
|
||||
thumbnail={item.thumbnail}
|
||||
images={item.variant?.product?.images}
|
||||
size="square"
|
||||
/>
|
||||
</LocalizedClientLink>
|
||||
<div className="flex flex-col justify-between flex-1">
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex flex-col overflow-ellipsis whitespace-nowrap mr-4 w-[180px]">
|
||||
<h3 className="text-base-regular overflow-hidden text-ellipsis">
|
||||
<LocalizedClientLink
|
||||
href={`/products/${item.product_handle}`}
|
||||
data-testid="product-link"
|
||||
>
|
||||
{item.title}
|
||||
</LocalizedClientLink>
|
||||
</h3>
|
||||
<LineItemOptions
|
||||
variant={item.variant}
|
||||
data-testid="cart-item-variant"
|
||||
data-value={item.variant}
|
||||
/>
|
||||
<span
|
||||
data-testid="cart-item-quantity"
|
||||
data-value={item.quantity}
|
||||
>
|
||||
Quantity: {item.quantity}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<LineItemPrice
|
||||
item={item}
|
||||
style="tight"
|
||||
currencyCode={cartState.currency_code}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DeleteButton
|
||||
id={item.id}
|
||||
className="mt-1"
|
||||
data-testid="cart-item-remove-button"
|
||||
>
|
||||
Remove
|
||||
</DeleteButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-4 flex flex-col gap-y-4 text-small-regular">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-ui-fg-base font-semibold">
|
||||
Subtotal{" "}
|
||||
<span className="font-normal">(excl. taxes)</span>
|
||||
</span>
|
||||
<span
|
||||
className="text-large-semi"
|
||||
data-testid="cart-subtotal"
|
||||
data-value={subtotal}
|
||||
>
|
||||
{convertToLocale({
|
||||
amount: subtotal,
|
||||
currency_code: cartState.currency_code,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<LocalizedClientLink href="/cart" passHref>
|
||||
<Button
|
||||
className="w-full"
|
||||
size="large"
|
||||
data-testid="go-to-cart-button"
|
||||
>
|
||||
Go to cart
|
||||
</Button>
|
||||
</LocalizedClientLink>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div>
|
||||
<div className="flex py-16 flex-col gap-y-4 items-center justify-center">
|
||||
<div className="bg-gray-900 text-small-regular flex items-center justify-center w-6 h-6 rounded-full text-white">
|
||||
<span>0</span>
|
||||
</div>
|
||||
<span>Your shopping bag is empty.</span>
|
||||
<div>
|
||||
<LocalizedClientLink href="/store">
|
||||
<>
|
||||
<span className="sr-only">Go to all products page</span>
|
||||
<Button onClick={close}>Explore products</Button>
|
||||
</>
|
||||
</LocalizedClientLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</PopoverPanel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CartDropdown
|
||||
@@ -0,0 +1,57 @@
|
||||
"use client"
|
||||
|
||||
import { transferCart } from "@lib/data/customer"
|
||||
import { ExclamationCircleSolid } from "@medusajs/icons"
|
||||
import { StoreCart, StoreCustomer } from "@medusajs/types"
|
||||
import { Button } from "@medusajs/ui"
|
||||
import { useState } from "react"
|
||||
|
||||
function CartMismatchBanner(props: {
|
||||
customer: StoreCustomer
|
||||
cart: StoreCart
|
||||
}) {
|
||||
const { customer, cart } = props
|
||||
const [isPending, setIsPending] = useState(false)
|
||||
const [actionText, setActionText] = useState("Run transfer again")
|
||||
|
||||
if (!customer || !!cart.customer_id) {
|
||||
return
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setIsPending(true)
|
||||
setActionText("Transferring..")
|
||||
|
||||
await transferCart()
|
||||
} catch {
|
||||
setActionText("Run transfer again")
|
||||
setIsPending(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center small:p-4 p-2 text-center bg-orange-300 small:gap-2 gap-1 text-sm mt-2 text-orange-800">
|
||||
<div className="flex flex-col small:flex-row small:gap-2 gap-1 items-center">
|
||||
<span className="flex items-center gap-1">
|
||||
<ExclamationCircleSolid className="inline" />
|
||||
Something went wrong when we tried to transfer your cart
|
||||
</span>
|
||||
|
||||
<span>·</span>
|
||||
|
||||
<Button
|
||||
variant="transparent"
|
||||
className="hover:bg-transparent active:bg-transparent focus:bg-transparent disabled:text-orange-500 text-orange-950 p-0 bg-transparent"
|
||||
size="base"
|
||||
disabled={isPending}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{actionText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CartMismatchBanner
|
||||
@@ -0,0 +1,135 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
Transition,
|
||||
} from "@headlessui/react"
|
||||
import { Fragment, useEffect, useMemo, useState } from "react"
|
||||
import ReactCountryFlag from "react-country-flag"
|
||||
|
||||
import { StateType } from "@lib/hooks/use-toggle-state"
|
||||
import { useParams, usePathname } from "next/navigation"
|
||||
import { updateRegion } from "@lib/data/cart"
|
||||
import { HttpTypes } from "@medusajs/types"
|
||||
|
||||
type CountryOption = {
|
||||
country: string
|
||||
region: string
|
||||
label: string
|
||||
}
|
||||
|
||||
type CountrySelectProps = {
|
||||
toggleState: StateType
|
||||
regions: HttpTypes.StoreRegion[]
|
||||
}
|
||||
|
||||
const CountrySelect = ({ toggleState, regions }: CountrySelectProps) => {
|
||||
const [current, setCurrent] = useState<
|
||||
| { country: string | undefined; region: string; label: string | undefined }
|
||||
| undefined
|
||||
>(undefined)
|
||||
|
||||
const { countryCode } = useParams()
|
||||
const currentPath = usePathname().split(`/${countryCode}`)[1]
|
||||
|
||||
const { state, close } = toggleState
|
||||
|
||||
const options = useMemo(() => {
|
||||
return regions
|
||||
?.map((r) => {
|
||||
return r.countries?.map((c) => ({
|
||||
country: c.iso_2,
|
||||
region: r.id,
|
||||
label: c.display_name,
|
||||
}))
|
||||
})
|
||||
.flat()
|
||||
.sort((a, b) => (a?.label ?? "").localeCompare(b?.label ?? ""))
|
||||
}, [regions])
|
||||
|
||||
useEffect(() => {
|
||||
if (countryCode) {
|
||||
const option = options?.find((o) => o?.country === countryCode)
|
||||
setCurrent(option)
|
||||
}
|
||||
}, [options, countryCode])
|
||||
|
||||
const handleChange = (option: CountryOption) => {
|
||||
updateRegion(option.country, currentPath)
|
||||
close()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Listbox
|
||||
as="span"
|
||||
onChange={handleChange}
|
||||
defaultValue={
|
||||
countryCode
|
||||
? options?.find((o) => o?.country === countryCode)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<ListboxButton className="py-1 w-full">
|
||||
<div className="txt-compact-small flex items-start gap-x-2">
|
||||
<span>Shipping to:</span>
|
||||
{current && (
|
||||
<span className="txt-compact-small flex items-center gap-x-2">
|
||||
{/* @ts-ignore */}
|
||||
<ReactCountryFlag
|
||||
svg
|
||||
style={{
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
}}
|
||||
countryCode={current.country ?? ""}
|
||||
/>
|
||||
{current.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</ListboxButton>
|
||||
<div className="flex relative w-full min-w-[320px]">
|
||||
<Transition
|
||||
show={state}
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
className="absolute -bottom-[calc(100%-36px)] left-0 xsmall:left-auto xsmall:right-0 max-h-[442px] overflow-y-scroll z-[900] bg-white drop-shadow-md text-small-regular uppercase text-black no-scrollbar rounded-rounded w-full"
|
||||
static
|
||||
>
|
||||
{options?.map((o, index) => {
|
||||
return (
|
||||
<ListboxOption
|
||||
key={index}
|
||||
value={o}
|
||||
className="py-2 hover:bg-gray-200 px-3 cursor-pointer flex items-center gap-x-2"
|
||||
>
|
||||
{/* @ts-ignore */}
|
||||
<ReactCountryFlag
|
||||
svg
|
||||
style={{
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
}}
|
||||
countryCode={o?.country ?? ""}
|
||||
/>{" "}
|
||||
{o?.label}
|
||||
</ListboxOption>
|
||||
)
|
||||
})}
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CountrySelect
|
||||
@@ -0,0 +1,23 @@
|
||||
// cart-button
|
||||
export { default as CartButton } from "./cart-button";
|
||||
export * from "./cart-button";
|
||||
|
||||
// cart-dropdown
|
||||
export { default as CartDropdown } from "./cart-dropdown";
|
||||
export * from "./cart-dropdown";
|
||||
|
||||
// cart-mismatch-banner
|
||||
export { default as CartMismatchBanner } from "./cart-mismatch-banner";
|
||||
export * from "./cart-mismatch-banner";
|
||||
|
||||
// country-select
|
||||
export { default as CountrySelect } from "./country-select";
|
||||
export * from "./country-select";
|
||||
|
||||
// medusa-cta
|
||||
export { default as MedusaCTA } from "./medusa-cta";
|
||||
export * from "./medusa-cta";
|
||||
|
||||
// side-menu
|
||||
export { default as SideMenu } from "./side-menu";
|
||||
export * from "./side-menu";
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Text } from "@medusajs/ui"
|
||||
|
||||
import Medusa from "../../../common/icons/medusa"
|
||||
import NextJs from "../../../common/icons/nextjs"
|
||||
|
||||
const MedusaCTA = () => {
|
||||
return (
|
||||
<Text className="flex gap-x-2 txt-compact-small-plus items-center">
|
||||
Powered by
|
||||
<a href="https://www.medusajs.com" target="_blank" rel="noreferrer">
|
||||
<Medusa fill="#9ca3af" className="fill-[#9ca3af]" />
|
||||
</a>
|
||||
&
|
||||
<a href="https://nextjs.org" target="_blank" rel="noreferrer">
|
||||
<NextJs fill="#9ca3af" />
|
||||
</a>
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
export default MedusaCTA
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client"
|
||||
|
||||
import { Popover, PopoverPanel, Transition } from "@headlessui/react"
|
||||
import { ArrowRightMini, XMark } from "@medusajs/icons"
|
||||
import { Text, clx, useToggleState } from "@medusajs/ui"
|
||||
import { Fragment } from "react"
|
||||
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import CountrySelect from "../country-select"
|
||||
import { HttpTypes } from "@medusajs/types"
|
||||
|
||||
const SideMenuItems = {
|
||||
Home: "/",
|
||||
Store: "/store",
|
||||
Account: "/account",
|
||||
Cart: "/cart",
|
||||
}
|
||||
|
||||
const SideMenu = ({ regions }: { regions: HttpTypes.StoreRegion[] | null }) => {
|
||||
const toggleState = useToggleState()
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className="flex items-center h-full">
|
||||
<Popover className="h-full flex">
|
||||
{({ open, close }) => (
|
||||
<>
|
||||
<div className="relative flex h-full">
|
||||
<Popover.Button
|
||||
data-testid="nav-menu-button"
|
||||
className="relative h-full flex items-center transition-all ease-out duration-200 focus:outline-none hover:text-ui-fg-base"
|
||||
>
|
||||
Menu
|
||||
</Popover.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-150"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100 backdrop-blur-2xl"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 backdrop-blur-2xl"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<PopoverPanel className="flex flex-col absolute w-full pr-4 sm:pr-0 sm:w-1/3 2xl:w-1/4 sm:min-w-min h-[calc(100vh-1rem)] z-30 inset-x-0 text-sm text-ui-fg-on-color m-2 backdrop-blur-2xl">
|
||||
<div
|
||||
data-testid="nav-menu-popup"
|
||||
className="flex flex-col h-full bg-[rgba(3,7,18,0.5)] rounded-rounded justify-between p-6"
|
||||
>
|
||||
<div className="flex justify-end" id="xmark">
|
||||
<button data-testid="close-menu-button" onClick={close}>
|
||||
<XMark />
|
||||
</button>
|
||||
</div>
|
||||
<ul className="flex flex-col gap-6 items-start justify-start">
|
||||
{Object.entries(SideMenuItems).map(([name, href]) => {
|
||||
return (
|
||||
<li key={name}>
|
||||
<LocalizedClientLink
|
||||
href={href}
|
||||
className="text-3xl leading-10 hover:text-ui-fg-disabled"
|
||||
onClick={close}
|
||||
data-testid={`${name.toLowerCase()}-link`}
|
||||
>
|
||||
{name}
|
||||
</LocalizedClientLink>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-y-6">
|
||||
<div
|
||||
className="flex justify-between"
|
||||
onMouseEnter={toggleState.open}
|
||||
onMouseLeave={toggleState.close}
|
||||
>
|
||||
{regions && (
|
||||
<CountrySelect
|
||||
toggleState={toggleState}
|
||||
regions={regions}
|
||||
/>
|
||||
)}
|
||||
<ArrowRightMini
|
||||
className={clx(
|
||||
"transition-transform duration-150",
|
||||
toggleState.state ? "-rotate-90" : ""
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Text className="flex justify-between txt-compact-small">
|
||||
© {new Date().getFullYear()} Medusa Store. All rights
|
||||
reserved.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideMenu
|
||||
@@ -0,0 +1,157 @@
|
||||
import { listCategories } from "@lib/data/categories"
|
||||
import { listCollections } from "@lib/data/collections"
|
||||
import { Text, clx } from "@medusajs/ui"
|
||||
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import MedusaCTA from "@modules/layout/components/medusa-cta"
|
||||
|
||||
export default async function Footer() {
|
||||
const { collections } = await listCollections({
|
||||
fields: "*products",
|
||||
})
|
||||
const productCategories = await listCategories()
|
||||
|
||||
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">
|
||||
{productCategories && productCategories?.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"
|
||||
>
|
||||
{productCategories?.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={clx(
|
||||
"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={clx(
|
||||
"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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react"
|
||||
|
||||
import Footer from "@modules/layout/templates/footer"
|
||||
import Nav from "@modules/layout/templates/nav"
|
||||
|
||||
const Layout: React.FC<{
|
||||
children: React.ReactNode
|
||||
}> = ({ children }) => {
|
||||
return (
|
||||
<div>
|
||||
<Nav />
|
||||
<main className="relative">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
@@ -0,0 +1,60 @@
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { listRegions } from "@lib/data/regions"
|
||||
import { StoreRegion } 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"
|
||||
|
||||
export default async function Nav() {
|
||||
const regions = await listRegions().then((regions: StoreRegion[]) => regions)
|
||||
|
||||
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">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user