puppy-lib-components
Version:
A modern TypeScript React component library with generic UI components and football pickem domain components
21 lines (20 loc) • 1.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar } from '../Avatar';
import { Badge } from '../Badge';
import { Card, CardContent, Box, Typography, Stack } from '@mui/material';
export const UserCard = ({ user, showDetails = false, clickable = false, onClick, className = '', actions, ...props }) => {
const handleClick = () => {
if (clickable && onClick) {
onClick(user);
}
};
const displayName = user.firstName && user.lastName
? `${user.firstName} ${user.lastName}`
: user.username;
return (_jsx(Card, { className: className, onClick: handleClick, sx: {
cursor: clickable ? 'pointer' : 'default',
'&:hover': clickable ? {
boxShadow: 6,
} : {},
}, ...props, children: _jsxs(CardContent, { children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [_jsx(Avatar, { src: user.avatarUrl, fallback: displayName, size: "lg", clickable: false }), _jsxs(Box, { flex: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", component: "div", children: displayName }), user.isActive === false && (_jsx(Badge, { variant: "warning", size: "sm", children: "Inactive" }))] }), _jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["@", user.username] }), showDetails && user.email && (_jsx(Typography, { variant: "body2", color: "text.secondary", children: user.email })), showDetails && user.createdAt && (_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Joined ", new Date(user.createdAt).toLocaleDateString()] }))] })] }), actions && (_jsx(Box, { mt: 2, children: actions }))] }) }));
};