57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client"
|
|
import {
|
|
LayoutComponentDefinition,
|
|
LayoutContext,
|
|
} from "@vibentec/component-map"
|
|
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
|
import * as MedusaIcons from "@medusajs/icons"
|
|
import * as CustomIcons from "@modules/common/icons"
|
|
export default function VtMenuItem({
|
|
nodes,
|
|
context,
|
|
}: {
|
|
nodes: LayoutComponentDefinition
|
|
context: LayoutContext
|
|
}) {
|
|
const props = nodes.config ?? {}
|
|
const title = props.title ?? ""
|
|
const items = props.items ?? []
|
|
const icon = props.icon ?? ""
|
|
|
|
const getIconComponent = (icon: string | undefined) => {
|
|
return icon
|
|
? (MedusaIcons as Record<string, any>)[icon] ??
|
|
(CustomIcons as Record<string, any>)[icon]
|
|
: undefined
|
|
}
|
|
return (
|
|
<div className={props.className ?? "flex flex-col gap-y-2"}>
|
|
<span>{title}</span>
|
|
<ul className="grid grid-cols-1 gap-2" data-testid="footer-categories">
|
|
{items.map((item: { text: string; href?: string; icon?: string }, index: number) => {
|
|
const Icon = getIconComponent(item.icon)
|
|
return (
|
|
<li
|
|
key={`${item.text}-${index}`}
|
|
className={props.itemClassName ?? "text-ui-fg-subtle txt-small"}
|
|
>
|
|
{Icon && <Icon className={props.iconClassName ?? "inline-block mr-2"} />}
|
|
{item.href ? (
|
|
<LocalizedClientLink
|
|
className="hover:text-ui-fg-base"
|
|
href={item.href}
|
|
data-testid="category-link"
|
|
>
|
|
{item.text}
|
|
</LocalizedClientLink>
|
|
) : (
|
|
<span className="hover:text-ui-fg-base">{item.text}</span>
|
|
)}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|