@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
35 lines (34 loc) • 1.54 kB
JavaScript
import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { omit } from '../../helpers/omit';
import { getTheme } from '../../theme-store';
export const Card = (props) => {
const { children, className, horizontal, href, theme: customTheme = {} } = props;
const Component = typeof href === 'undefined' ? 'div' : 'a';
const theirProps = removeCustomProps(props);
const theme = mergeDeep(getTheme().card, customTheme);
return (React.createElement(Component, { "data-testid": "flowbite-card", href: href, className: twMerge(theme.root.base, theme.root.horizontal[horizontal ? 'on' : 'off'], href && theme.root.href, className), ...theirProps },
React.createElement(Image, { ...props }),
React.createElement("div", { className: theme.root.children }, children)));
};
const Image = ({ theme: customTheme = {}, ...props }) => {
const theme = mergeDeep(getTheme().card, customTheme);
if (props.renderImage) {
return props.renderImage(theme, props.horizontal ?? false);
}
if (props.imgSrc) {
return (React.createElement("img", { "data-testid": "flowbite-card-image", alt: props.imgAlt ?? '', src: props.imgSrc, className: twMerge(theme.img.base, theme.img.horizontal[props.horizontal ? 'on' : 'off']) }));
}
return null;
};
const removeCustomProps = omit([
'renderImage',
'imgSrc',
'imgAlt',
'children',
'className',
'horizontal',
'href',
'theme',
]);