Shop-Storefront/src/modules/layout/templates/vt-banner/banner-ticker.tsx

24 lines
798 B
TypeScript

import styles from "./banner-ticker.module.css"
import { DynamicLayoutRenderer } from "vibentec/renderer"
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
interface BannerTickerProps {
node: LayoutComponentDefinition
context: LayoutContext
}
interface BannerConfigProps {
items?: LayoutComponentDefinition[]
speed?: number
}
export default function BannerTicker({ node, context }: BannerTickerProps) {
const props = node.config as BannerConfigProps ?? {}
const speed = props.speed ?? 10;
return (
<div className="relative overflow-hidden w-full h-full">
<div className={styles.ticker} style={{ animationDuration: `${speed}s` }} >
<DynamicLayoutRenderer nodes={props.items ?? []} context={context} />
</div>
</div>
)
}