diff --git a/config/nam.mds-starter-design.json b/config/nam.mds-starter-design.json new file mode 100644 index 0000000..292b7ab --- /dev/null +++ b/config/nam.mds-starter-design.json @@ -0,0 +1,221 @@ +[ + { + "Header": { + "config": { + "sticky": true + }, + "children": [ + { + "Banner": { + "config": { + "variant": "nav", + "className": "h-12 bg-[#E6EFFC] text-[#11314E] gap-12 pl-16", + "left": [ + { + "Link": { + "config": { + "label": "Über Uns", + "href": "/", + "className": "text-[13px] flex items-center gap-1 cursor-pointer" + } + } + }, + { + "Link": { + "config": { + "label": "Kontaktieren Uns", + "href": "/", + "className": "text-[13px] flex items-center gap-1" + } + } + } + ], + "center": [ + { + "Link": { + "config": { + "label": "Einsparung durch Digitalisierung in der Arztpraxis", + "href": "/", + "className": "text-[13px] flex items-center gap-1 " + } + } + }, + { + "Button": { + "config": { + "label": "Mehr Info", + "href": "/", + "className": "text-[13px] flex items-center bg-[#112638] gap-1 " + } + } + } + ], + "right": [ + { + "Dropdown": { + "config": { + "trigger": { + "text": "EURO", + "className": "font-bold text-[13px] text-[#11314E] flex items-center gap-1 hover:text-[#009b93]", + "isShowArrow": true + }, + "items": [ + { + "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png", + "text": "EURO", + "href": "/" + } + ] + } + } + }, + { + "VtCountryCodeSelect": { + "config": { + "trigger": { + "className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent", + "isFlag": false + } + } + } + } + ] + } + } + }, + { + "Nav": { + "config": { + "left": [ + { + "VtSideMenu": {} + }, + { + "VtMegaMenu": { + "config": { + "navLabel": { + "text": "Sale", + "className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-[#009b93]" + } + } + } + } + ], + "center": [ + { + "HomeButton": { + "config": { + "label": "Medusa Store" + } + } + } + ], + "right": [ + { + "AccountButton": { + "config": { + "label": "Account", + "className": "hover:text-ui-fg-base" + } + } + }, + { + "VtCartButton": { + "config": { + "variant": "link", + "className": "hover:text-ui-fg-base" + } + } + } + ] + } + } + } + ] + } + }, + { + "CartMismatchBanner": { + "config": { + "show": true + } + } + }, + { + "FreeShippingPriceNudge": { + "config": { + "variant": "popup" + } + } + }, + { + "PropsChildren": {} + }, + { + "Footer": { + "config": { + "className": "content-container flex w-full border h-[300px] justify-between", + "left": [ + { + "VtMenuItem": { + "config": { + "title": "category", + "className": "flex flex-col gap-y-2", + "itemClassName": "text-ui-fg-subtle txt-small ml-3", + "items": [ + { + "text": "Clothing", + "href": "/" + }, + { + "text": "Shoes", + "href": "/categories/shoes" + }, + { + "text": "Accessories", + "href": "/categories/accessories" + } + ] + } + } + } + ], + "center": [ + { + "VtMenuItem": { + "config": { + "title": "category", + "className": "flex flex-col gap-y-2", + "itemClassName": "text-ui-fg-subtle txt-small ml-3", + "items": [ + { + "text": "Clothing", + "href": "/" + }, + { + "text": "Shoes", + "href": "/categories/shoes" + }, + { + "text": "Accessories", + "href": "/categories/accessories" + } + ] + } + } + } + ], + "right": [ + { + "Text": { + "config": { + "label": "Medusa Check", + "className": "text-[13px] text-[#A6A6A6]" + } + } + } + ] + } + } + } +] diff --git a/src/modules/layout/components/cart-button/index.tsx b/src/modules/layout/components/cart-button/index.tsx index 4d5bbd5..c79bf68 100644 --- a/src/modules/layout/components/cart-button/index.tsx +++ b/src/modules/layout/components/cart-button/index.tsx @@ -1,8 +1,8 @@ import { retrieveCart } from "@lib/data/cart" import CartDropdown from "../cart-dropdown" -export default async function CartButton() { +export default async function CartButton({ iconName }: { iconName?: string }) { const cart = await retrieveCart().catch(() => null) - return + return } diff --git a/src/modules/layout/components/cart-dropdown/index.tsx b/src/modules/layout/components/cart-dropdown/index.tsx index 304b2fe..ef5b6b9 100644 --- a/src/modules/layout/components/cart-dropdown/index.tsx +++ b/src/modules/layout/components/cart-dropdown/index.tsx @@ -9,6 +9,7 @@ import { import { convertToLocale } from "@lib/util/money" import { HttpTypes } from "@medusajs/types" import { Button } from "@medusajs/ui" +import * as MedusaIcons from "@medusajs/icons" 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" @@ -19,8 +20,10 @@ import { Fragment, useEffect, useRef, useState } from "react" const CartDropdown = ({ cart: cartState, + iconName, }: { cart?: HttpTypes.StoreCart | null + iconName?: string }) => { const [activeTimer, setActiveTimer] = useState( undefined @@ -73,6 +76,10 @@ const CartDropdown = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [totalItems, itemRef.current]) + const Icon = iconName + ? (MedusaIcons as Record>)[iconName] + : undefined + return (
- {`Cart (${totalItems})`} + {Icon ? ( + + ) : ( + {`Cart (${totalItems})`} + )} { +import * as MedusaIcons from "@medusajs/icons" +export const AccountButton = ({ + nodes, + context, +}: { + nodes: LayoutComponentDefinition + context: LayoutContext +}) => { const props = nodes.config ?? {} - const className = clx("hover:text-ui-fg-base", props.className); - const style: React.CSSProperties = {}; - if (props.bgColor) style.backgroundColor = props.bgColor; - if (props.textColor) style.color = props.textColor; + const className = clx("hover:text-ui-fg-base", props.className) + const style: React.CSSProperties = {} + if (props.bgColor) style.backgroundColor = props.bgColor + if (props.textColor) style.color = props.textColor const href = props.href ?? "/account" const label = props.label ?? "Account" - + const iconName = props.icon + const Icon = iconName + ? (MedusaIcons as Record>)[iconName] + : undefined return ( -
+
- {label} + {Icon ? : label} -
+
) } -export default AccountButton \ No newline at end of file +export default AccountButton diff --git a/src/modules/layout/components/vt-cartbutton/index.tsx b/src/modules/layout/components/vt-cartbutton/index.tsx index 781b9c1..cb6a8f2 100644 --- a/src/modules/layout/components/vt-cartbutton/index.tsx +++ b/src/modules/layout/components/vt-cartbutton/index.tsx @@ -3,23 +3,9 @@ import { LayoutComponentDefinition, LayoutContext, } from "vibentec/component-map" -import { clx, IconButton } from "@medusajs/ui" +import { clx } from "@medusajs/ui" import { Suspense } from "react" import CartButton from "@modules/layout/components/cart-button" -import { ShoppingBag, ShoppingCart } from "@medusajs/icons" - -const IconButtonComponent = ({ className, variant }: { className?: string; variant?: "shoppingBag" | "cart" }) => { - const variants = { - shoppingBag: ShoppingBag, - cart: ShoppingCart, - } - const Icon = variants[variant ?? "shoppingBag"] - return ( - - - - ) -} export const VtCartButton = ({ nodes, @@ -30,15 +16,6 @@ export const VtCartButton = ({ }) => { const props = nodes.config ?? {} const className = clx("hover:text-ui-fg-base flex gap-2", props.className) - - const variants = { - link: , - shoppingBagbutton: , - cartIconButton: , - } - if (!props.variant) return null - const fallBackComp = variants[props.variant as keyof typeof variants] - return ( } > - {fallBackComp} + ) }