@nexusui/components/core/ProductCard/ProductCard.container.d.ts

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import { ReactNode } from 'react';
import type { CardProps } from '@mui/material/Card';
import type { MenuItemProps } from '@mui/material/MenuItem/MenuItem';
import { ListItemProps } from '@mui/material/ListItem';
import { ListItemButtonProps } from '@mui/material/ListItemButton';
import { ICardLoadingProps } from '../Card/Card.container';
export type CustomizeListItemProps = Omit<ListItemProps, 'children' | 'onClick'> & Pick<ListItemButtonProps, 'onClick'> & {
    /**
     * The main text to display in the menu item.
     * and it is required.
     * @default undefined
     */
    text: ReactNode;
    /**
     * The icon element to display in the right of the menu item.
     * which shows the intent of the menu item.
     * @default undefined
     */
    icon?: ReactNode;
};
export type ProductCardListItemProps = ReactNode | ListItemProps | CustomizeListItemProps;
export type ProductCardMenuItemProps = ReactNode | MenuItemProps;
export type IProductCard = Omit<CardProps, 'children' | 'content'> & ICardLoadingProps & {
    /**
     * The icon element to display in the top left corner of the card.
     * It always shows the Logo of the product.
     * @default undefined
     */
    icon: ReactNode;
    /**
     * The main label text/element above the content
     * @default undefined
     */
    headline: ReactNode;
    /**
     * A second line of text that appears below the card headline. This is typically used to display a subheading .
     * @default undefined
     */
    subheading?: ReactNode;
    /**
     * The content to display in the body of the card
     * @default undefined
     */
    content?: ReactNode;
    /**
     * Custom content or menu items array to render to the right of the card.
     * @default undefined
     */
    menuActions?: ReactNode | ReadonlyArray<ProductCardMenuItemProps>;
    /**
     * The menu of the product
     * It allows to add a menu to the product card, like quick access to the product operation.
     * @default undefined
     */
    listActions?: ReadonlyArray<ProductCardListItemProps>;
};
export declare const ProductCard: (props: IProductCard) => import("react/jsx-runtime").JSX.Element;