59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
|
|
import { clx } from "@medusajs/ui"
|
|
import ReactMarkdown from "react-markdown"
|
|
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
|
import rehypeRaw from "rehype-raw"
|
|
import remarkBreaks from "remark-breaks"
|
|
|
|
interface BannerCTAProps {
|
|
node: LayoutComponentDefinition
|
|
context: LayoutContext
|
|
}
|
|
|
|
interface BannerConfigProps {
|
|
text?: string
|
|
href?: string
|
|
iconLeft?: string
|
|
iconRight?: string
|
|
className?: string
|
|
}
|
|
export default function BannerCTA({ node, context }: BannerCTAProps) {
|
|
const props = node.config as BannerConfigProps ?? {}
|
|
const text = props.text ?? ""
|
|
const href = props.href ?? undefined
|
|
const iconLeft = props.iconLeft
|
|
const iconRight = props.iconRight
|
|
|
|
const className = clx(
|
|
"content-container flex justify-center items-center text-center w-full h-full text-xs font-medium",
|
|
props.className
|
|
)
|
|
|
|
const content = (
|
|
<div className="flex items-center gap-2">
|
|
{iconLeft && <DynamicIcon name={iconLeft} />}
|
|
<div className="leading-none">
|
|
<ReactMarkdown
|
|
children={text}
|
|
remarkPlugins={[remarkBreaks]}
|
|
rehypePlugins={[rehypeRaw]}
|
|
/>
|
|
</div>
|
|
{iconRight && <DynamicIcon name={iconRight} />}
|
|
</div>
|
|
)
|
|
|
|
return href ? (
|
|
<LocalizedClientLink href={href} className={className}>
|
|
{content}
|
|
</LocalizedClientLink>
|
|
) : (
|
|
<div className={className}>{content}</div>
|
|
)
|
|
}
|
|
|
|
function DynamicIcon({ name }: { name: string }) {
|
|
return <span className="material-symbols-outlined text-sm">{name}</span>
|
|
} |