@worktif/purei
Version:
Work TIF Material UI Theme Provider and Customization Suite for React applications with dark mode support and dynamic color schemes
45 lines (44 loc) • 2.39 kB
TypeScript
import * as React from 'react';
import { Theme } from '@mui/material/styles';
/**
* Represents an interactive card component.
* Extends Card component with additional styling for hover effect.
*/
export declare const InteractiveCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
/**
* ThreeDCard component extends the Card component and adds 3D hover effect.
*
* It applies a box shadow and scale transformation when hovered over.
*/
export declare const ThreeDCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
/**
* Represents a styled card component with layered shadow effect.
* Inherits styles from Card component.
* @constant {Component} LayeredShadowCard
* @property {string} boxShadow - The box shadow applied to the card element.
* @property {string} transition - The transition effect applied to the card element for transform and box-shadow.
* @property {string} '&:hover' - The styles applied to the card element on hover.
* @property {string} '&:hover.transform' - The transform effect applied on hover.
* @property {string} '&:hover.boxShadow' - The box shadow applied to the card element on hover.
*/
export declare const LayeredShadowCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
export declare const GradientCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
export declare const MotionCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
export declare const GradientSalesCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
export declare const GradientProfileCard: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
type CardProductProps = {
sx?: (theme: Theme) => any;
bgcolor?: string;
[prop: string]: any;
};
/**
* Renders a card component with a styled container and optional children elements.
* The card includes custom styling such as background color, border radius,
* shadow effects, and responsive text alignment.
*
* @param {object} props - The properties object.
* @param {any} props.children - Elements or components to be rendered inside the card.
* @return {JSX.Element} The styled card component with the provided children.
*/
export declare function CardProduct({ theme, action, children, seoSection, bgcolor, sx }: CardProductProps): React.JSX.Element;
export {};