@state-less/leap-frontend
Version:
A collection of open source fullstack services powered by React Server
41 lines (40 loc) • 2.62 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Visibility, Group } from '@mui/icons-material';
import { useComponent } from '@state-less/react-client';
import { Box, Tooltip, ListItem, ListItemText, ListItemIcon, Chip, } from '@mui/material';
export const ViewCounterSpan = ({ component, clientOnly }) => {
const clientStr = `${component?.props?.clients} ${clientOnly ? 'views' : 'users'}`;
const viewsStr = `${component?.props?.views} views`;
return (_jsxs("div", { children: [!clientOnly && _jsx("span", { children: viewsStr }), _jsx("span", { children: clientStr })] }));
};
export const ViewCounterChip = ({ clientOnly, loading, component }) => {
const clientStr = `${component?.props?.clients} ${clientOnly ? 'views' : 'users'}`;
const viewsStr = `${component?.props?.views} views`;
return (_jsxs(_Fragment, { children: [!clientOnly && (_jsx(Chip, { icon: _jsx(Visibility, {}), label: loading ? '-' : viewsStr })), _jsx(Chip, { icon: _jsx(Visibility, {}), label: loading ? '-' : clientStr })] }));
};
export const ViewCounterItem = ({ component, clientOnly, loading, sx, textColor, }) => {
return (_jsx(Tooltip, { title: "Views", placement: "left", children: _jsxs(Box, { sx: {
display: 'flex',
justifyContent: 'start',
width: 'min-content',
...sx,
}, children: [!clientOnly && (_jsxs(ListItem, { dense: true, sx: { color: textColor }, children: [_jsx(ListItemIcon, { children: _jsx(Visibility, {}) }), _jsx(ListItemText, { sx: { color: textColor }, primary: loading ? '-' : component?.props?.views })] })), _jsxs(ListItem, { dense: true, children: [_jsx(ListItemIcon, { children: clientOnly ? _jsx(Visibility, {}) : _jsx(Group, {}) }), _jsx(ListItemText, { sx: { color: textColor }, primary: loading
? '-'
: clientOnly
? component?.props?.views
: component?.props?.clients })] })] }) }));
};
export const ViewCounter = ({ componentKey, data, skip, variant, clientOnly, sx, textColor, ssr, }) => {
const [component, { loading }] = useComponent(componentKey, {
skip,
data,
suspend: true,
ssr: ssr,
});
const props = { clientOnly, component, loading, sx, textColor };
if (variant === 'plaintext')
return _jsx(ViewCounterSpan, { ...props });
if (variant === 'chips')
return _jsx(ViewCounterChip, { ...props });
return _jsx(ViewCounterItem, { ...props });
};