| import React from "react"; | |
| import { cn } from "#/utils/utils"; | |
| const MENU_SECTION_HEADING_PADDING = "px-2 pb-1 pt-1"; | |
| const MENU_SECTION_HEADING_TEXT = | |
| "text-[11px] font-semibold uppercase tracking-wide text-[var(--oh-muted)]"; | |
| export function MenuHeading({ | |
| children, | |
| suffix, | |
| }: { | |
| children: React.ReactNode; | |
| suffix?: React.ReactNode; | |
| }) { | |
| if (suffix != null) { | |
| return ( | |
| <div | |
| role="presentation" | |
| className={cn( | |
| "flex items-baseline justify-between gap-2", | |
| MENU_SECTION_HEADING_PADDING, | |
| )} | |
| > | |
| <span | |
| className={cn( | |
| "min-w-0 truncate text-left", | |
| MENU_SECTION_HEADING_TEXT, | |
| )} | |
| > | |
| {children} | |
| </span> | |
| {suffix} | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div | |
| role="presentation" | |
| className={cn(MENU_SECTION_HEADING_PADDING, MENU_SECTION_HEADING_TEXT)} | |
| > | |
| {children} | |
| </div> | |
| ); | |
| } | |