Merge pull request 'feat: add medusa starter design hero banner' (#13) from namds/implement-hero-banner into main
Reviewed-on: #13
This commit is contained in:
commit
389cf1c856
|
|
@ -177,6 +177,36 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": {
|
||||
"config": {
|
||||
"duration": 0,
|
||||
"images": ["./banner-hero.webp"],
|
||||
"links": ["/account"]
|
||||
}
|
||||
},
|
||||
"left": [
|
||||
{
|
||||
"VtCtaBanner": {
|
||||
"config": {
|
||||
"className": "left-[120px] top-[80px] relative w-full p-12 flex flex-col items-start justify-center text-left bg-transperant border-none shadow-none",
|
||||
"buttonTextClassName": "inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none",
|
||||
"tagTextClassName": "text-[#0D382E] text-lg font-medium mb-2 bg-transparent",
|
||||
"tagText": "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats.",
|
||||
"titleText": "breakfast made easy.",
|
||||
"buttonText": "Jetzt entdecken"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
|
|
@ -213,10 +243,26 @@
|
|||
"emailInputClassName": "w-[300px] ml-8"
|
||||
},
|
||||
"socials": [
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
}
|
||||
],
|
||||
"socialsClassName": "ml-8 mt-10",
|
||||
"className": "",
|
||||
|
|
@ -311,15 +357,22 @@
|
|||
"config": {
|
||||
"className": "content-container bg-[#003f31] w-full text text-[#11314E] flex items-center justify-between",
|
||||
"leftClassName": "w-full",
|
||||
"left": [
|
||||
],
|
||||
"left": [],
|
||||
"center": [],
|
||||
"right": [
|
||||
{
|
||||
"VtFooterBottom": {
|
||||
"config": {
|
||||
"className": " mr-[80px]",
|
||||
"icons": ["Mastercard", "PayPal", "Visa", "Mastercard","Mastercard","Mastercard","Mastercard"]
|
||||
"icons": [
|
||||
"Mastercard",
|
||||
"PayPal",
|
||||
"Visa",
|
||||
"Mastercard",
|
||||
"Mastercard",
|
||||
"Mastercard",
|
||||
"Mastercard"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,6 +130,44 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": {
|
||||
"config": {
|
||||
"duration": 0,
|
||||
"images": [
|
||||
"./drsquatch-banner.jpg"
|
||||
],
|
||||
"links": [
|
||||
"/account"
|
||||
]
|
||||
}
|
||||
},
|
||||
"left": [
|
||||
{
|
||||
"VtCtaBanner": {
|
||||
"config": {
|
||||
"variant": "default",
|
||||
"className": "left-[120px] top-[120px] bg-transparent border-none text-white text-center",
|
||||
"tagTextClassName": "text-white bg-transparent",
|
||||
"titleTextClassName": "text-white font-bold leading-normal text-[30px]",
|
||||
"descriptionTextClassName": "text-white text-[1rem] w-[300px] ml-[6.6rem]",
|
||||
"buttonTextClassName": "text-white bg-orange-500 w-[300px]",
|
||||
"tagText": "ALL NEW!",
|
||||
"titleText": "LUMBERJACK LODGE",
|
||||
"descriptionText": "Step into the lodge with the warm, sweet scent of maple and vanilla.",
|
||||
"buttonText": "SHOP NOW"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
|
|
@ -277,10 +315,26 @@
|
|||
"buttonClassName": "bg-[#C4622C] w-[90px]",
|
||||
"socialsClassName": "mt-4 gap-8",
|
||||
"socials": [
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,6 +134,14 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"variant": "default",
|
||||
"className": "bg-custom-gradient"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
|
|
|
|||
|
|
@ -176,6 +176,41 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": {
|
||||
"config": {
|
||||
"duration": 5,
|
||||
"images": [
|
||||
"./banner-hero.webp",
|
||||
"./banner-hero-1.webp",
|
||||
"./banner-hero-2.webp"
|
||||
],
|
||||
"links": ["/", "/account", "/product"]
|
||||
}
|
||||
},
|
||||
"left": [
|
||||
{
|
||||
"VtCtaBanner": {
|
||||
"config": {
|
||||
"variant": "default",
|
||||
"className": "left-[120px] top-[80px]",
|
||||
"titleTextClassName": "leading-normal",
|
||||
"tagText": "Besonders Aktion",
|
||||
"titleText": "Willkommen in Vibentec IT Shop",
|
||||
"descriptionText": "Insert the accordion description here. It would look better as two lines of text or more.",
|
||||
"buttonText": "Zum Einkaufen"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
|
|
@ -209,7 +244,10 @@
|
|||
"logoAlt": "Vibentec IT",
|
||||
"title": "Der Wegbereiter für innovative IT-Lösungen",
|
||||
"description": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.",
|
||||
"cta": { "label": "Kontaktieren Sie uns", "href": "/" },
|
||||
"cta": {
|
||||
"label": "Kontaktieren Sie uns",
|
||||
"href": "/"
|
||||
},
|
||||
"className": "",
|
||||
"ctaClassName": "ml-8",
|
||||
"titleClassName": "ml-8",
|
||||
|
|
@ -329,7 +367,11 @@
|
|||
"VtFooterBottom": {
|
||||
"config": {
|
||||
"text": "©2025 Vibentec IT. All rights reserved",
|
||||
"icons": ["Mastercard", "PayPal", "Visa"]
|
||||
"icons": [
|
||||
"Mastercard",
|
||||
"PayPal",
|
||||
"Visa"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
"@radix-ui/react-accordion": "^1.2.1",
|
||||
"@stripe/react-stripe-js": "^1.7.2",
|
||||
"@stripe/stripe-js": "^1.29.0",
|
||||
"embla-carousel-autoplay": "^8.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "^15.3.1",
|
||||
"pg": "^8.11.3",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
|
|
@ -23,14 +23,17 @@ export default async function Home(props: {
|
|||
const { collections } = await listCollections({
|
||||
fields: "id, handle, title",
|
||||
})
|
||||
const res = await listCollections({
|
||||
fields: "id, handle, title",
|
||||
})
|
||||
|
||||
if (!collections || !region) {
|
||||
return null
|
||||
}
|
||||
|
||||
console.log(res, '--------------')
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
{/* <Hero /> */}
|
||||
<div className="py-12">
|
||||
<ul className="flex flex-col gap-x-6">
|
||||
<FeaturedProducts collections={collections} region={region} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import { Github } from "@medusajs/icons"
|
||||
import { Button, Heading } from "@medusajs/ui"
|
||||
import { VtCarousel } from "../vt-carousel"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
|
||||
|
||||
export default function HeroDefault({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const props = node.config ?? {}
|
||||
const imageDisplayer = props.ImageDisplayer
|
||||
|
||||
if (imageDisplayer) {
|
||||
return (
|
||||
<div className="absolute inset-0 z-auto w-full h-full">
|
||||
<VtCarousel nodes={{ config: imageDisplayer.config }} context={context} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-auto flex flex-col justify-center items-center text-center small:p-32 gap-6">
|
||||
<span>
|
||||
<Heading
|
||||
level="h1"
|
||||
className="text-3xl leading-10 text-ui-fg-base font-normal"
|
||||
>
|
||||
Ecommerce Starter Template
|
||||
</Heading>
|
||||
<Heading
|
||||
level="h2"
|
||||
className="text-3xl leading-10 text-ui-fg-subtle font-normal"
|
||||
>
|
||||
Powered by Medusa and Next.js
|
||||
</Heading>
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/medusajs/nextjs-starter-medusa"
|
||||
target="_blank"
|
||||
>
|
||||
<Button variant="secondary">
|
||||
View on GitHub
|
||||
<Github />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "vibentec/component-map"
|
||||
import { clx } from "@medusajs/ui"
|
||||
import BannerHero from "./banner-hero"
|
||||
import { DynamicLayoutRenderer } from "vibentec/renderer"
|
||||
|
||||
export default async function Hero({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const left = nodes.config?.left ?? []
|
||||
const center = nodes.config?.center ?? []
|
||||
const right = nodes.config?.right ?? []
|
||||
const heroClassName = clx(
|
||||
"min-h-[30rem] w-full border-b border-ui-border-base relative",
|
||||
props.className
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={heroClassName}>
|
||||
<BannerHero node={nodes} context={context} />
|
||||
<div className="absolute z-20">
|
||||
<nav className="content-container txt-xsmall-plus flex items-center justify-between text-small-regular">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{left && <DynamicLayoutRenderer nodes={left} context={context} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4">
|
||||
{center && (
|
||||
<DynamicLayoutRenderer nodes={center} context={context} />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4 justify-end">
|
||||
{right && <DynamicLayoutRenderer nodes={right} context={context} />}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import style from './index.module.css'
|
||||
export const usePrevNextButtons = (emblaApi: any) => {
|
||||
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
|
||||
const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
|
||||
|
||||
const onPrevButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollPrev()
|
||||
}, [emblaApi])
|
||||
|
||||
const onNextButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollNext()
|
||||
}, [emblaApi])
|
||||
|
||||
const onSelect = useCallback((emblaApi: any) => {
|
||||
setPrevBtnDisabled(!emblaApi.canScrollPrev())
|
||||
setNextBtnDisabled(!emblaApi.canScrollNext())
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on('reInit', onSelect).on('select', onSelect)
|
||||
}, [emblaApi, onSelect])
|
||||
|
||||
return {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick
|
||||
}
|
||||
}
|
||||
|
||||
export const PrevButton = (props: any) => {
|
||||
const { children, ...restProps } = props
|
||||
|
||||
return (
|
||||
<button
|
||||
className={style['embla__button']}
|
||||
type="button"
|
||||
{...restProps}
|
||||
>
|
||||
<svg className={style['embla__button__svg']} viewBox="0 0 532 532">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
|
||||
/>
|
||||
</svg>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export const NextButton = (props: any) => {
|
||||
const { children, ...restProps } = props
|
||||
|
||||
return (
|
||||
<button
|
||||
className={style['embla__button']}
|
||||
type="button"
|
||||
{...restProps}
|
||||
>
|
||||
<svg className={style['embla__button__svg']} viewBox="0 0 532 532">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
|
||||
/>
|
||||
</svg>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
|
||||
export const useDotButton = (emblaApi: any) => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
const [scrollSnaps, setScrollSnaps] = useState([])
|
||||
|
||||
const onDotButtonClick = useCallback(
|
||||
(index: number) => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollTo(index)
|
||||
},
|
||||
[emblaApi]
|
||||
)
|
||||
|
||||
const onInit = useCallback((emblaApi: any) => {
|
||||
setScrollSnaps(emblaApi.scrollSnapList())
|
||||
}, [])
|
||||
|
||||
const onSelect = useCallback((emblaApi: any) => {
|
||||
setSelectedIndex(emblaApi.selectedScrollSnap())
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
|
||||
onInit(emblaApi)
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
|
||||
}, [emblaApi, onInit, onSelect])
|
||||
|
||||
return {
|
||||
selectedIndex,
|
||||
scrollSnaps,
|
||||
onDotButtonClick
|
||||
}
|
||||
}
|
||||
|
||||
export const DotButton = (props: any) => {
|
||||
const { children, ...restProps } = props
|
||||
|
||||
return (
|
||||
<button type="button" {...restProps}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
.embla {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
--slide-height: 19rem;
|
||||
--slide-spacing: 1rem;
|
||||
--slide-size: 100%;
|
||||
}
|
||||
.embla__viewport {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.embla__container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
touch-action: pan-y pinch-zoom;
|
||||
margin-left: calc(var(--slide-spacing) * -1);
|
||||
--slide-spacing: 1rem;
|
||||
}
|
||||
.embla__slide {
|
||||
--slide-size: 100%;
|
||||
--slide-spacing: 1rem;
|
||||
transform: translate3d(0, 0, 0);
|
||||
flex: 0 0 var(--slide-size);
|
||||
min-width: 0;
|
||||
padding-left: var(--slide-spacing);
|
||||
}
|
||||
.embla__slide__number {
|
||||
height: 100%;
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
.embla__slide__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.embla__controls {
|
||||
display: grid;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
justify-content: space-between;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.embla__buttons {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.embla__button {
|
||||
--text-high-contrast-rgb-value: 49, 49, 49;
|
||||
--detail-high-contrast: rgb(192, 192, 192);
|
||||
--text-body: rgb(54, 49, 61);
|
||||
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
touch-action: manipulation;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
z-index: 1001;
|
||||
border-radius: 50%;
|
||||
color: var(--text-body);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.embla__button:disabled {
|
||||
--detail-high-contrast: rgb(192, 192, 192);
|
||||
color: var(--detail-high-contrast);
|
||||
}
|
||||
.embla__button__svg {
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
}
|
||||
.embla__dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 48%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.embla__dot {
|
||||
--text-high-contrast-rgb-value: 49, 49, 49;
|
||||
--text-body: rgb(54, 49, 61);
|
||||
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
touch-action: manipulation;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.embla__dot:after {
|
||||
--detail-medium-contrast: rgb(234, 234, 234);
|
||||
--detail-medium-contrast-rgb-value: 234, 234, 234;
|
||||
box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
content: "";
|
||||
}
|
||||
.embla__dot--selected:after {
|
||||
--text-body: black;
|
||||
box-shadow: inset 0 0 0 0.2rem var(--text-body);
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
"use client"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import styles from "./index.module.css"
|
||||
import useEmblaCarousel from "embla-carousel-react"
|
||||
import Autoplay from "embla-carousel-autoplay"
|
||||
import { useMemo } from "react"
|
||||
import { DotButton, useDotButton } from "./carousel-dot-button"
|
||||
import { NextButton, PrevButton, usePrevNextButtons } from "./carousel-arrow-button"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
|
||||
export function VtCarousel({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const { options } = props as any
|
||||
const images: string[] = props.images ?? props.slides ?? []
|
||||
const links: (string | undefined)[] = props.links ?? []
|
||||
const durationSeconds: number = props.duration ?? 4
|
||||
const showControls = images.length > 1
|
||||
|
||||
const plugins = useMemo(() => {
|
||||
if (!durationSeconds || durationSeconds <= 0) return []
|
||||
return [
|
||||
Autoplay({
|
||||
delay: durationSeconds * 1000,
|
||||
stopOnInteraction: false,
|
||||
stopOnMouseEnter: true,
|
||||
}),
|
||||
]
|
||||
}, [durationSeconds])
|
||||
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins)
|
||||
const { selectedIndex, scrollSnaps, onDotButtonClick } =
|
||||
useDotButton(emblaApi)
|
||||
|
||||
const {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick,
|
||||
} = usePrevNextButtons(emblaApi)
|
||||
return (
|
||||
<section className={styles["embla"]}>
|
||||
<div className={styles["embla__viewport"]} ref={emblaRef}>
|
||||
<div className={styles["embla__container"]}>
|
||||
{images && images.map((src: string, index: number) => (
|
||||
<div className={styles["embla__slide"]} key={index + src}>
|
||||
<div className={styles["embla__slide__number"]}>
|
||||
{links[index] ? (
|
||||
<LocalizedClientLink href={links[index]}>
|
||||
<img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
|
||||
</LocalizedClientLink>
|
||||
) : (
|
||||
<img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showControls && (
|
||||
<div className={styles["embla__controls"]}>
|
||||
<div className={styles["embla__buttons"]}>
|
||||
<PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
|
||||
<NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
|
||||
</div>
|
||||
|
||||
<div className={styles["embla__dots"]}>
|
||||
{scrollSnaps.map((_, index) => (
|
||||
<DotButton
|
||||
key={index}
|
||||
onClick={() => onDotButtonClick(index)}
|
||||
className={[
|
||||
styles["embla__dot"],
|
||||
index === selectedIndex ? styles["embla__dot--selected"] : "",
|
||||
].filter(Boolean).join(" ")}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -23,7 +23,6 @@ export default function VtCountrySelectClient({
|
|||
const triggerText = props?.trigger?.text
|
||||
const [items, setItems] = useState<{ text: string; label?: string }[]>([])
|
||||
const { countryCode } = useParams()
|
||||
console.log(regions)
|
||||
useEffect(() => {
|
||||
if (!regions || regions.length === 0) {
|
||||
setItems([])
|
||||
|
|
@ -39,7 +38,6 @@ export default function VtCountrySelectClient({
|
|||
.flat()
|
||||
.filter((o) => o.text)
|
||||
.sort((a, b) => (a.label ?? "").localeCompare(b.label ?? ""))
|
||||
console.log(opts)
|
||||
setItems(opts)
|
||||
}, [regions])
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
"use client"
|
||||
import { Button, clx } from "@medusajs/ui"
|
||||
import { ChevronRightMini } from "@medusajs/icons"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
|
||||
export function DefaultCtaBanner({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"relative w-[544px] bg-white rounded-[24px] border border-[#E6EFFC] shadow-[0_12px_40px_rgba(17,49,78,0.10)] p-6",
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
{props.tagText && (
|
||||
<div
|
||||
className={clx(
|
||||
"inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium",
|
||||
props.tagTextClassName
|
||||
)}
|
||||
>
|
||||
{props.tagText}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.titleText && (
|
||||
<h1
|
||||
className={clx(
|
||||
"mt-4 text-[#11314E] font-semibold leading-normal text-[56px]",
|
||||
props.titleTextClassName
|
||||
)}
|
||||
>
|
||||
{props.titleText}
|
||||
</h1>
|
||||
)}
|
||||
|
||||
{props.descriptionText && (
|
||||
<p
|
||||
className={clx(
|
||||
"mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80",
|
||||
props.descriptionTextClassName
|
||||
)}
|
||||
>
|
||||
{props.descriptionText}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className={clx(
|
||||
"mt-8 inline-flex items-center gap-2 bg-[#0F2740] hover:bg-[#173551] text-white px-6 py-3 rounded-[12px] shadow-md",
|
||||
props.buttonTextClassName
|
||||
)}
|
||||
>
|
||||
{props.buttonText}
|
||||
<ChevronRightMini />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
"use client"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import { DefaultCtaBanner } from "./default-cta"
|
||||
|
||||
export function VtCtaBanner({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const variant = props.variant ?? "default"
|
||||
|
||||
const variants: Record<string, any> = {
|
||||
default: DefaultCtaBanner,
|
||||
}
|
||||
|
||||
const Component = variants[variant] || DefaultCtaBanner
|
||||
|
||||
return <Component nodes={nodes} context={context} />
|
||||
}
|
||||
|
|
@ -22,8 +22,11 @@ import VtFooterHero from "@modules/layout/templates/vt-footer/vt-footer-hero"
|
|||
import VtFooterBottom from "@modules/layout/templates/vt-footer/vt-footer-bottom"
|
||||
import VtLogo from "@modules/layout/templates/vt-logo"
|
||||
import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup"
|
||||
import Hero from "@modules/layout/templates/hero"
|
||||
import { VtCarousel } from "@modules/layout/templates/vt-carousel"
|
||||
import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner"
|
||||
|
||||
type ComponentConfig = Record<string, any>;
|
||||
type ComponentConfig = Record<string, any>
|
||||
|
||||
export interface LayoutComponentDefinition {
|
||||
config?: ComponentConfig
|
||||
|
|
@ -31,33 +34,44 @@ export interface LayoutComponentDefinition {
|
|||
}
|
||||
|
||||
export interface LayoutContext {
|
||||
customer: any;
|
||||
cart: any;
|
||||
shippingOptions: any[];
|
||||
contentChildren: React.ReactNode;
|
||||
customer: any
|
||||
cart: any
|
||||
shippingOptions: any[]
|
||||
contentChildren: React.ReactNode
|
||||
}
|
||||
|
||||
export type ComponentRenderer = {
|
||||
render: (entry: LayoutComponentDefinition, ctx: LayoutContext) => React.ReactNode
|
||||
render: (
|
||||
entry: LayoutComponentDefinition,
|
||||
ctx: LayoutContext
|
||||
) => React.ReactNode
|
||||
}
|
||||
|
||||
// Utility methods
|
||||
const configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
|
||||
render: (entry) => <Component {...entry.config} />
|
||||
const configOnly = (
|
||||
Component: React.ComponentType<any>
|
||||
): ComponentRenderer => ({
|
||||
render: (entry) => <Component {...entry.config} />,
|
||||
})
|
||||
|
||||
const nodesContextRenderer = (Component: React.ComponentType<any>): ComponentRenderer => ({
|
||||
render: (entry: any, ctx: LayoutContext) => <Component nodes={entry} context={ctx} />
|
||||
});
|
||||
const nodesContextRenderer = (
|
||||
Component: React.ComponentType<any>
|
||||
): ComponentRenderer => ({
|
||||
render: (entry: any, ctx: LayoutContext) => (
|
||||
<Component nodes={entry} context={ctx} />
|
||||
),
|
||||
})
|
||||
|
||||
const renderChildren = (entry: LayoutComponentDefinition, ctx: LayoutContext) =>
|
||||
entry.children ? <DynamicLayoutRenderer nodes={entry.children} context={ctx} /> : null
|
||||
|
||||
entry.children ? (
|
||||
<DynamicLayoutRenderer nodes={entry.children} context={ctx} />
|
||||
) : null
|
||||
|
||||
// Component Map
|
||||
export const componentMap: Record<string, ComponentRenderer> = {
|
||||
Header: nodesContextRenderer(VtHeader),
|
||||
Header: nodesContextRenderer(VtHeader),
|
||||
Nav: nodesContextRenderer(VtNav),
|
||||
Hero: nodesContextRenderer(Hero),
|
||||
VtMegaMenu: nodesContextRenderer(VtMegaMenu),
|
||||
VtSideMenu: nodesContextRenderer(VtSideMenu),
|
||||
Banner: nodesContextRenderer(Banner),
|
||||
|
|
@ -75,17 +89,20 @@ export const componentMap: Record<string, ComponentRenderer> = {
|
|||
CartMismatchBanner: configOnly(CartMismatchBanner),
|
||||
FreeShippingPriceNudge: configOnly(FreeShippingPriceNudge),
|
||||
PropsChildren: {
|
||||
render: (_props, ctx) => ctx.contentChildren, // PageLayout's props.children
|
||||
render: (_props, ctx) => ctx.contentChildren, // PageLayout's props.children
|
||||
},
|
||||
VtCtaBanner: nodesContextRenderer(VtCtaBanner),
|
||||
VtFooterHero: nodesContextRenderer(VtFooterHero),
|
||||
VtFooterBottom: nodesContextRenderer(VtFooterBottom),
|
||||
VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
|
||||
Footer: nodesContextRenderer(VtFooter)
|
||||
Footer: nodesContextRenderer(VtFooter),
|
||||
ImageDisplayer: nodesContextRenderer(VtCarousel),
|
||||
}
|
||||
|
||||
|
||||
export type ComponentName = keyof typeof componentMap
|
||||
|
||||
// //maps key = componentName to value = props + children
|
||||
// export type LayoutComponentNode = Record<string, LayoutComponentDefinition>
|
||||
export type LayoutComponentNode = { [K in ComponentName]: LayoutComponentDefinition }[ComponentName]
|
||||
export type LayoutComponentNode = {
|
||||
[K in ComponentName]: LayoutComponentDefinition
|
||||
}[ComponentName]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import fs from "fs"
|
|||
import path from "path"
|
||||
import { jsonFileNames } from "./devJsonFileNames";
|
||||
|
||||
const fileName = jsonFileNames.nam3Bear;
|
||||
const fileName = jsonFileNames.namStarter;
|
||||
|
||||
export async function loadDesignConfig() {
|
||||
const filePath = path.join(process.cwd(), "config", fileName)
|
||||
|
|
|
|||
Loading…
Reference in New Issue