72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
"use client"
|
|
import { DropdownMenu } from "@medusajs/ui"
|
|
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
|
import ChevronDown from "@modules/common/icons/chevron-down"
|
|
import {
|
|
LayoutComponentDefinition,
|
|
LayoutContext,
|
|
} from "@vibentec/component-map"
|
|
|
|
export default function VtDropdown({
|
|
nodes,
|
|
context,
|
|
}: {
|
|
nodes: LayoutComponentDefinition
|
|
context: LayoutContext
|
|
}) {
|
|
const props = nodes.config ?? {}
|
|
if (!props.trigger.text || props.items.length === 0) {
|
|
return null
|
|
}
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenu.Trigger
|
|
className={props.trigger.className + " flex items-center gap-1"}
|
|
>
|
|
{props.trigger.icon && (
|
|
<img
|
|
src={props.trigger.icon}
|
|
alt={props.trigger.text}
|
|
className="w-5 h-5 rounded-[50%] mr-3"
|
|
/>
|
|
)}
|
|
{props.trigger.text} {props.trigger.isShowArrow && <ChevronDown />}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content>
|
|
{props.items.length > 0 &&
|
|
props.items.map(
|
|
(
|
|
item: {
|
|
text: string
|
|
className?: string
|
|
href?: string
|
|
icon?: string
|
|
},
|
|
index: number
|
|
) => (
|
|
<DropdownMenu.Item
|
|
key={item.text + index}
|
|
className={item.className || ""}
|
|
>
|
|
{item.icon && (
|
|
<img
|
|
src={item.icon}
|
|
alt={item.text}
|
|
className="w-5 h-5 rounded-[50%] mr-3"
|
|
/>
|
|
)}
|
|
{item.href ? (
|
|
<LocalizedClientLink href={item.href}>
|
|
{item.text}
|
|
</LocalizedClientLink>
|
|
) : (
|
|
item.text
|
|
)}
|
|
</DropdownMenu.Item>
|
|
)
|
|
)}
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu>
|
|
)
|
|
}
|