diff --git a/config/nam.3bear.design.json b/config/nam.3bear.design.json index f32909a..a80b5f1 100644 --- a/config/nam.3bear.design.json +++ b/config/nam.3bear.design.json @@ -44,7 +44,7 @@ { "Nav": { "config": { - "className": "h-12 bg-white text-[#003F31] gap-12", + "className": "h-24 bg-white text-[#003F31] gap-12", "left": [ { "Image": { @@ -165,17 +165,17 @@ } }, { - "IconButton": { + "Button": { "config": { - "variant": "search", + "icon": "search", "className": "shadow-none" } } }, { - "IconButton": { + "Button": { "config": { - "variant": "user", + "icon": "user", "className": "shadow-none" } } diff --git a/config/nam.drsquatch.design.json b/config/nam.drsquatch.design.json index e896c2a..66e969e 100644 --- a/config/nam.drsquatch.design.json +++ b/config/nam.drsquatch.design.json @@ -62,7 +62,7 @@ "config": { "label": "SUBCRIBE", "href": "/", - "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]" + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" } } }, @@ -71,7 +71,7 @@ "config": { "label": "REWARD", "href": "/", - "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]" + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" } } }, @@ -80,7 +80,7 @@ "config": { "navLabel": { "text": "SHOP", - "className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:text-[#009b93]" + "className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white" } } } @@ -90,7 +90,7 @@ "config": { "navLabel": { "text": "OUR STORY", - "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]" + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white" } } } @@ -127,9 +127,9 @@ } }, { - "IconButton": { + "Button": { "config": { - "variant": "user", + "icon": "user", "className": "shadow-none bg-transparent text-white" } } @@ -137,7 +137,7 @@ { "VtCartButton": { "config": { - "variant": "cartIconButton", + "icon": "cartIconButton", "className": "shadow-none bg-transparent text-white" } } diff --git a/config/nam.vibentec.design.json b/config/nam.vibentec.design.json new file mode 100644 index 0000000..0c0e05a --- /dev/null +++ b/config/nam.vibentec.design.json @@ -0,0 +1,211 @@ +[ + { + "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": "/" + } + ] + } + } + }, + { + "Dropdown": { + "config": { + "trigger": { + "text": "DE", + "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": "DE", + "href": "/" + } + ] + } + } + } + ] + } + } + }, + { + "Nav": { + "config": { + "className": "h-24 bg-[white] text-[#11314E] gap-12 pl-16", + "left": [ + { + "Image": { + "config": { + "src": "/VibentecIT-logo.svg", + "alt": "MyShop", + "className": "h-full w-[180px] mr-4", + "objectFit": "contain" + } + } + }, + { + "Link": { + "config": { + "label": "Home", + "href": "/", + "className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:underline hover:text-[#009b93]" + } + } + }, + { + "Link": { + "config": { + "label": "Shop", + "href": "/", + "className": "text-[13px] text-[#11314E] flex items-center mr-6 gap-1 hover:underline hover:text-[#009b93]" + } + } + }, + { + "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]" + } + } + } + }, + { + "VtMegaMenu": { + "config": { + "navLabel": { + "text": "OUR STORY", + "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white" + } + } + } + } + ], + "right": [ + { + "SearchInput": { + "config": { + "placeholder": "Search" + } + } + }, + { + "Button": { + "config": { + "icon": "user", + "className": " flex items-center gap-1 shadow-none" + } + } + }, + { + "Button": { + "config": { + "icon": "heart", + "className": " flex items-center gap-1 shadow-none" + } + } + }, + { + "VtCartButton": { + "config": { + "variant": "shoppingBagbutton", + "className": "shadow-none bg-transparent text-black" + } + } + } + ] + } + } + } + ] + } + }, + { + "CartMismatchBanner": { + "config": { + "show": true + } + } + }, + { + "FreeShippingPriceNudge": { + "config": { + "variant": "popup" + } + } + }, + { + "PropsChildren": {} + }, + { + "Footer": { + "config": { + "copyrightText": "© 2025 MyShop" + } + } + } +] diff --git a/public/VibentecIT-logo.svg b/public/VibentecIT-logo.svg new file mode 100644 index 0000000..a1efe53 --- /dev/null +++ b/public/VibentecIT-logo.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/modules/layout/components/vt-dropdown/index.tsx b/src/modules/layout/components/vt-dropdown/index.tsx index e15f8d6..6a0e346 100644 --- a/src/modules/layout/components/vt-dropdown/index.tsx +++ b/src/modules/layout/components/vt-dropdown/index.tsx @@ -33,22 +33,23 @@ export default function VtDropdown({ {props.trigger.text} {props.trigger.isShowArrow && } - {props.items.map( - ( - item: { - text: string - className?: string - href?: string - icon?: string - }, - index: number - ) => ( - - {item.icon && ( - 0 && + props.items.map( + ( + item: { + text: string + className?: string + href?: string + icon?: string + }, + index: number + ) => ( + + {item.icon && ( + {item.text} -
+
{props.left && }
-
+
{props.center && }
-
+
{props.right && }
diff --git a/src/modules/layout/templates/vt-icon-button/index.tsx b/src/modules/layout/templates/vt-icon-button/index.tsx index 93b26d0..7494f8f 100644 --- a/src/modules/layout/templates/vt-icon-button/index.tsx +++ b/src/modules/layout/templates/vt-icon-button/index.tsx @@ -1,11 +1,11 @@ -import { IconButton } from "@medusajs/ui" -import { MagnifyingGlass, User, ShoppingBag } from "@medusajs/icons" +import { Button, IconButton } from "@medusajs/ui" +import { MagnifyingGlass, User, ShoppingBag, Heart } from "@medusajs/icons" import { LayoutComponentDefinition, LayoutContext, } from "@vibentec/component-map" -export default function VtIconButton({ +export default function VtButton({ nodes, context, }: { @@ -13,16 +13,29 @@ export default function VtIconButton({ context: LayoutContext }) { const props = nodes.config || {} - const variantsIcon = { - search: MagnifyingGlass, + + const icons = { + search: MagnifyingGlass, user: User, - cart: ShoppingBag + cart: ShoppingBag, + heart: Heart } - if (!props.variant) return null - const Icon = variantsIcon[props.variant as keyof typeof variantsIcon] + const Icon = props.icon && icons[props.icon as keyof typeof icons] return ( - - - + <> + {props?.icon && ( + + + {props?.label && ( + {props.label} + )} + + )} + {!props?.icon && ( + + )} + ) } diff --git a/src/modules/layout/templates/vt-nav/index.tsx b/src/modules/layout/templates/vt-nav/index.tsx index a7d09b5..cf5a35f 100644 --- a/src/modules/layout/templates/vt-nav/index.tsx +++ b/src/modules/layout/templates/vt-nav/index.tsx @@ -14,13 +14,13 @@ export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefini return (
diff --git a/src/modules/layout/templates/vt-search-input/index.tsx b/src/modules/layout/templates/vt-search-input/index.tsx new file mode 100644 index 0000000..699f2e0 --- /dev/null +++ b/src/modules/layout/templates/vt-search-input/index.tsx @@ -0,0 +1,40 @@ +import React from "react" +import { MagnifyingGlass } from "@medusajs/icons" +import { + LayoutComponentDefinition, + LayoutContext, +} from "@vibentec/component-map" + +export default function VtSearchInput({ + nodes, + context, +}: { + nodes: LayoutComponentDefinition + context: LayoutContext +}) { + const props = nodes.config || {} + const placeholder = props.placeholder ?? "Search" + const shortcut = props.shortcut ?? "⌘K" + + return ( +
+ + + {shortcut && ( + + {shortcut} + + )} +
+ ) +} \ No newline at end of file diff --git a/src/vibentec/component-map.tsx b/src/vibentec/component-map.tsx index 1199f3c..156bdb5 100644 --- a/src/vibentec/component-map.tsx +++ b/src/vibentec/component-map.tsx @@ -14,7 +14,8 @@ import VtLink from "@modules/layout/components/vt-linkbutton" import VtSideMenu from "@modules/layout/components/vt-sidemenu" import VtImage from "@modules/layout/templates/vt-image" import VtDropdown from "@modules/layout/components/vt-dropdown" -import VtIconButton from "@modules/layout/templates/vt-icon-button" +import VtButton from "@modules/layout/templates/vt-icon-button" +import VtSearchInput from "@modules/layout/templates/vt-search-input" type ComponentConfig = Record; @@ -56,7 +57,8 @@ export const componentMap: Record = { Banner: nodesContextRenderer(Banner), HomeButton: nodesContextRenderer(HomeButton), AccountButton: nodesContextRenderer(AccountButton), - IconButton: nodesContextRenderer(VtIconButton), + Button: nodesContextRenderer(VtButton), + SearchInput: nodesContextRenderer(VtSearchInput), VtCartButton: nodesContextRenderer(VtCartButton), Link: nodesContextRenderer(VtLink), Image: nodesContextRenderer(VtImage), diff --git a/src/vibentec/configloader.ts b/src/vibentec/configloader.ts index c153820..ad9c8e0 100644 --- a/src/vibentec/configloader.ts +++ b/src/vibentec/configloader.ts @@ -2,7 +2,7 @@ import fs from "fs" import path from "path" import { jsonFileNames } from "./devJsonFileNames"; -const fileName = jsonFileNames.namDrsquatch; +const fileName = jsonFileNames.namVibentec; export async function loadDesignConfig() { const filePath = path.join(process.cwd(), "config", fileName) diff --git a/src/vibentec/devJsonFileNames.ts b/src/vibentec/devJsonFileNames.ts index 3787912..62a4aa2 100644 --- a/src/vibentec/devJsonFileNames.ts +++ b/src/vibentec/devJsonFileNames.ts @@ -3,4 +3,5 @@ export const jsonFileNames = { stePlayGround: "ste.playground.design.json", nam3Bear: "nam.3bear.design.json", namDrsquatch: "nam.drsquatch.design.json", + namVibentec: "nam.vibentec.design.json" }; \ No newline at end of file