@fluent-windows/core
Version:
React components that inspired by Microsoft's Fluent Design System.
58 lines (54 loc) • 1.62 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-windows/styles';
import Box from '../Box';
import { styles } from './Card.styled';
import Content from './components/Content';
import Actions from './components/Actions';
import Header from './components/Header';
import { CardPropTypes } from './Card.type';
export const name = 'Card';
const useStyles = createUseStyles(styles, {
name
});
const Card = React.forwardRef((props, ref) => {
const {
as: Component = 'div',
className: classNameProp,
acrylic,
minWidth = 275,
maxWidth = 355,
...rest
} = props;
const classes = useStyles(props);
const className = classNames(classes.root, classes.hover, {
[classes.acrylic]: acrylic
}, classNameProp);
return React.createElement(Box, _extends({
as: Component,
className: className,
ref: ref,
minWidth: minWidth,
maxWidth: maxWidth,
acrylic: acrylic
}, rest));
});
Object.defineProperty(Card, 'Content', {
get() {
return Content;
}
});
Object.defineProperty(Card, 'Actions', {
get() {
return Actions;
}
});
Object.defineProperty(Card, 'Header', {
get() {
return Header;
}
});
Card.displayName = `F${name}`;
Card.propTypes = CardPropTypes;
export default Card;