// src/components/ui/rich-menu.tsx — rich dropdown-menu building blocks
// (icon-tile + bold title + description), généralisés depuis le pattern
// `ImportMenuItem` de keywords-toolbar.tsx. Bâtis sur le DropdownMenu radix
// (dropdown-menu.tsx). Palette = tokens shadcn, la couleur de tuile est passée
// par l'appelant via `iconClassName` (ex. "bg-blue-600/90 text-white").
"use client";
import type * as React from "react";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
/** One rich menu item: colored icon tile + bold title + muted description. */
export function RichMenuItem({
icon,
iconClassName,
title,
description,
disabled,
onSelect,
}: {
icon: React.ReactNode;
/** Tailwind classes for the 34px tile (bg + text color, opt. border). */
iconClassName?: string;
title: string;
description: string;
disabled?: boolean;
onSelect?: () => void;
}) {
return (
{icon}
{title}
{description}
);
}
/** Uppercase section label inside a rich menu. */
export function RichMenuSection({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
/** Footer row with a 7px status dot (green by default) + muted text. The
* caller renders its own above this footer. */
export function RichMenuFooter({
children,
dotClassName,
}: {
children: React.ReactNode;
/** Overrides the dot color (default: emerald-500). */
dotClassName?: string;
}) {
return (
{children}
);
}