@devopness/ui-react
Version:
Devopness Design System React Components - Painless essential DevOps to everyone
101 lines (100 loc) • 2.44 kB
TypeScript
import { Color } from '../../../colors';
import { IconProps } from '../../Primitives/Icon';
import { LinkProps } from '../../Primitives/Link';
import { TooltipProps } from '../../Primitives/Tooltip';
type CardProps = React.PropsWithChildren<{
/**
* Props for the avatar wrapper
*/
avatarProps: {
backgroundColor: Color;
};
/**
* Array of footer items to be rendered at the bottom of the card
*/
footer?: {
/**
* Icon to display next to the label
*/
icon?: IconProps['name'] | IconProps;
/**
* Text to display in the footer item
*/
label?: string | {
content: string;
style?: React.CSSProperties;
};
/**
* Tooltip text to show on hover
*/
tooltip?: string | Omit<TooltipProps, 'children'>;
/**
* URL to navigate to when footer item is clicked
*/
url?: LinkProps['to'] | Omit<LinkProps, 'style'>;
}[];
/**
* Props for the header
*/
headerProps?: {
backgroundColor?: Color;
borderBottomColor?: Color;
};
/**
* Icon to display in the card
*/
icon?: IconProps['name'] | IconProps;
/**
* Unique identifier for the card
*/
id?: string;
/**
* Indicator to display in the card
*/
indicator?: React.ReactNode;
/**
* Subtitle to display in the card
*/
subtitle?: string;
/**
* Title to display in the card
*/
title: string;
/**
* Props for the title
*/
titleProps?: Pick<React.HTMLProps<HTMLSpanElement>, 'style'>;
/**
* URL to navigate to when card is clicked
*/
url?: LinkProps['to'] | Omit<LinkProps, 'style'>;
}>;
/**
* A flexible and customizable card component for displaying content
* with a consistent, structured layout.
*
* @example
* // Basic usage
* <Card
* title="Environment"
* subtitle="Overview of current environments"
* avatarProps={{ backgroundColor: 'blue.500' }}
* icon="cubes"
* />
*
* @example
* // Card with footer and navigation
* <Card
* title="Teams"
* url="/teams"
* footer={[
* {
* label: 'View All',
* url: '/teams'
* }
* ]}
* />
*/
declare const Card: ({ children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
export type { CardProps };
export { Card };