45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { tv } from 'tailwind-variants'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
const content = tv({
|
|
base: 'z-50 rounded-lg border border-border bg-panel p-1 shadow-lg'
|
|
})
|
|
|
|
const item = tv({
|
|
base: 'flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none select-none data-[highlighted]:bg-hover data-[disabled]:cursor-default data-[disabled]:text-muted/50',
|
|
variants: {
|
|
tone: {
|
|
default: 'text-surface',
|
|
component: 'text-[#9747ff] data-[highlighted]:bg-[#9747ff]/12 data-[disabled]:text-[#9747ff]/40'
|
|
},
|
|
justify: {
|
|
between: 'justify-between gap-6',
|
|
start: 'justify-start'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
tone: 'default',
|
|
justify: 'between'
|
|
}
|
|
})
|
|
|
|
const separator = tv({
|
|
base: 'mx-1 my-1 h-px bg-border'
|
|
})
|
|
|
|
export function menuContent(options?: { class?: string }) {
|
|
return twMerge(content(), options?.class)
|
|
}
|
|
|
|
export function menuItem(options?: {
|
|
tone?: 'default' | 'component'
|
|
justify?: 'between' | 'start'
|
|
class?: string
|
|
}) {
|
|
return twMerge(item(options), options?.class)
|
|
}
|
|
|
|
export function menuSeparator(options?: { class?: string }) {
|
|
return twMerge(separator(), options?.class)
|
|
}
|