@state-less/leap-frontend/dist/server-components/examples/Polls.js

A collection of open source fullstack services powered by React Server

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Alert, Box, Card, IconButton, List, ListItem, ListItemSecondaryAction, ListItemText, Chip, } from '@mui/material';
import { useComponent } from '@state-less/react-client';
import { Favorite } from '@mui/icons-material';
import { FlexBox } from '../../components/FlexBox.js';
export const Poll = ({ id = 'poll', message, }) => {
    const [component, { error, loading }] = useComponent(id, {});
    const sum = component?.props?.votes.reduce((a, b) => a + b, 0);
    const max = component?.props?.votes?.reduce((a, b) => Math.max(a, b), 0);
    return (_jsxs(Card, { children: [loading && _jsx(Alert, { severity: "info", children: "Loading..." }), error && _jsx(Alert, { severity: "error", children: error.message }), message && message?.(component?.props || {}), _jsx(List, { children: component?.props?.values?.map((value, i) => {
                    const percentage = (100 / sum) * component?.props?.votes[i];
                    return (_jsxs(ListItem, { dense: true, children: [_jsx(Box, { sx: {
                                    ml: -2,
                                    zIndex: 0,
                                    position: 'absolute',
                                    width: `${percentage}%`,
                                    height: `100%`,
                                    backgroundColor: 'info.main',
                                } }), _jsx(ListItemText, { sx: { zIndex: 0 }, primary: _jsxs(FlexBox, { sx: { gap: 1, alignItems: 'center' }, children: [_jsx(Chip, { color: max === component?.props?.votes[i]
                                                ? 'success'
                                                : undefined, size: "small", label: _jsx("b", { children: component?.props?.votes[i] }) }), _jsx(Box, { children: value })] }) }), _jsx(ListItemSecondaryAction, { children: _jsx(IconButton, { onClick: () => component?.props?.vote(i), disabled: component?.props?.voted > -1 &&
                                        component?.props?.voted !== i, color: component.props.voted === i ? 'error' : 'default', children: _jsx(Favorite, {}) }) })] }));
                }) })] }));
};