@acrsolutions/chat-components/dist/App.js

Un set di componenti per la creazione di un'applicazione di messaggistica

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Composition } from 'atomic-layout';
import { last } from 'lodash';
import { useState } from 'react';
import { ConvoPreview } from './components/ConvoPreview';
import { data } from './components/EXAMPLES/exampleData';
import { AtomicLayoutFilteringProps } from './ui/AtomicLayoutFilteringProps';
import { LibThemeProvider } from './ui/theme/ThemeProvider';
function App() {
    const [activeConvo, setActiveConvo] = useState(0);
    const handleClick = (id) => {
        setActiveConvo(id);
    };
    return (_jsx(AtomicLayoutFilteringProps, { children: _jsx(LibThemeProvider, { theme: {}, children: _jsxs(Composition, { templateRows: "auto 1fr", height: '100%', children: [_jsx("p", { children: "Demo" }), _jsxs(Composition, { templateCols: "1fr 3fr", children: [_jsx("div", { children: data.map((item) => {
                                    const messageText = last(item.convo)?.messageText;
                                    const sendDate = last(item.convo)?.sentDate;
                                    const contactNumber = item.convo[0].contactNumber;
                                    return (_jsx(ConvoPreview, { isActiveConvo: activeConvo === item.id, handlePreviewClick: () => handleClick(item.id), contactName: item.contactName, contactNumber: contactNumber, messageText: messageText, sentDate: sendDate, notificationsNumber: item.notificationsNumber }, item.id));
                                }) }), _jsx("div", { style: { width: '100%', background: 'grey' } })] })] }) }) }));
}
export default App;