69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
"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>
|
|
)
|
|
}
|