go back (

>
);
}

export default App;” data-lang=”textual content/jsx”>

import 'primeicons/primeicons.css';
import 'primereact/sources/issues/lara-light-indigo/theme.css';
import 'primereact/sources/primereact.css';
import 'primeflex/primeflex.css';
import ReactDOM from 'react-dom';
import React, { useState, useEffect, useRef } from 'react';
import PrimeReact from 'primereact/api';
import { Dock } from 'primereact/dock';
import { Tooltip } from 'primereact/tooltip';
import { Conversation } from 'primereact/conversation';
import { Terminal } from 'primereact/terminal';
import { TerminalService } from 'primereact/terminalservice';
import { Galleria } from 'primereact/galleria';
import { Toast } from 'primereact/toast';
import { Tree } from 'primereact/tree';
import { Menubar } from 'primereact/menubar';
import { NodeService } from './CountryService';
import { PhotoService } from './CountryService';
import './App.css';

serve as App() {

    const [displayTerminal, setDisplayTerminal] = useState(false);
    const [displayFinder, setDisplayFinder] = useState(false);
    const [images, setImages] = useState(null);
    const [nodes, setNodes] = useState(null);
    const toast = useRef(null);
    const toast2 = useRef(null);
    const galleria = useRef(null);

    const imgPath="photographs/dock";
    const imgErrorPath="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png";

    const dockItems = [
        {
            label: 'Finder',
            icon: () => <img alt="Finder" data-fr-src="https://www.primefaces.org/primereact/images/dock/finder.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />,
            command: () => {
                setDisplayFinder(true);
            }
        },
        {
            label: 'Terminal',
            icon: () => <img alt="Finder" data-fr-src="https://www.primefaces.org/primereact/images/dock/terminal.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />,
            command: () => {
                setDisplayTerminal(true);
            }
        },
        {
            label: 'App Store',
            icon: () => <img alt="App Store" data-fr-src="https://www.primefaces.org/primereact/images/dock/appstore.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />,
            command: () => {
                toast2.current.show({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE' });
            }
        },
        {
            label: 'Safari',
            icon: () => <img alt="Finder" src="	https://www.primefaces.org/primereact/images/dock/safari.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />,
            command: () => {
                toast2.current.show({ severity: 'warn', summary: 'Safari has stopped working' });
            }
        },
        {
            label: 'Photos',
            icon: () => <img alt="Photos" src="https://www.primefaces.org/primereact/images/dock/photos.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />,
            command: () => {
                galleria.current.show();
            }
        },
        {
            label: 'GitHub',
            icon: () => <img alt="Settings" src="https://www.primefaces.org/primereact/images/dock/github.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />,
        },
        {
            label: 'Trash',
            icon: () => <img alt="trash" src="https://www.primefaces.org/primereact/images/dock/trash.png" onError={(e) => e.target.src = imgErrorPath} width="100%" />,
            command: () => {
                toast.current.show({ severity: 'info', summary: 'Empty Trash' });
            }
        }
    ];

    const dockBasicItems = [
        {
            label: 'Finder',
            icon: () => <img alt="Finder" src="https://www.primefaces.org/primereact/images/dock/finder.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />
        },
        {
            label: 'App Store',
            icon: () => <img alt="App Store" src="https://www.primefaces.org/primereact/images/dock/appstore.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />
        },
        {
            label: 'Photos',
            icon: () => <img alt="Photos" src="https://www.primefaces.org/primereact/images/dock/photos.svg" onError={(e) => e.target.src = imgErrorPath} width="100%" />
        },
        {
            label: 'Trash',
            icon: () => <img alt="trash" src="https://www.primefaces.org/primereact/images/dock/trash.png" onError={(e) => e.target.src = imgErrorPath} width="100%" />
        }
    ];

    const menubarItems = [
        {
            label: 'Finder',
            className: 'menubar-root'
        },
        {
            label: 'File',
            items: [
                {
                    label: 'New',
                    icon: 'pi pi-fw pi-plus',
                    items: [
                        {
                            label: 'Bookmark',
                            icon: 'pi pi-fw pi-bookmark'
                        },
                        {
                            label: 'Video',
                            icon: 'pi pi-fw pi-video'
                        },

                    ]
                },
                {
                    label: 'Delete',
                    icon: 'pi pi-fw pi-trash'
                },
                {
                    separator: true
                },
                {
                    label: 'Export',
                    icon: 'pi pi-fw pi-external-link'
                }
            ]
        },
        {
            label: 'Edit',
            pieces: [
                {
                    label: 'Left',
                    icon: 'pi pi-fw pi-align-left'
                },
                {
                    label: 'Right',
                    icon: 'pi pi-fw pi-align-right'
                },
                {
                    label: 'Center',
                    icon: 'pi pi-fw pi-align-center'
                },
                {
                    label: 'Justify',
                    icon: 'pi pi-fw pi-align-justify'
                },

            ]
        },
        {
            label: 'Customers',
            pieces: [
                {
                    label: 'New',
                    icon: 'pi pi-fw pi-user-plus',

                },
                {
                    label: 'Delete',
                    icon: 'pi pi-fw pi-user-minus',

                },
                {
                    label: 'Search',
                    icon: 'pi pi-fw pi-users',
                    items: [
                        {
                            label: 'Filter',
                            icon: 'pi pi-fw pi-filter',
                            items: [
                                {
                                    label: 'Print',
                                    icon: 'pi pi-fw pi-print'
                                }
                            ]
                        },
                        {
                            icon: 'pi pi-fw pi-bars',
                            label: 'Checklist'
                        }
                    ]
                }
            ]
        },
        {
            label: 'Occasions',
            pieces: [
                {
                    label: 'Edit',
                    icon: 'pi pi-fw pi-pencil',
                    items: [
                        {
                            label: 'Save',
                            icon: 'pi pi-fw pi-calendar-plus'
                        },
                        {
                            label: 'Delete',
                            icon: 'pi pi-fw pi-calendar-minus'
                        }
                    ]
                },
                {
                    label: 'Archieve',
                    icon: 'pi pi-fw pi-calendar-times',
                    pieces: [
                        {
                            label: 'Remove',
                            icon: 'pi pi-fw pi-calendar-minus'
                        }
                    ]
                }
            ]
        },
        {
            label: 'Give up'
        }
    ];

    const responsiveOptions = [
        {
            breakpoint: '1024px',
            numVisible: 3
        },
        {
            breakpoint: '768px',
            numVisible: 2
        },
        {
            breakpoint: '560px',
            numVisible: 1
        }
    ];

    const itemTemplate = (merchandise) => {
        go back <img src={merchandise.itemImageSrc} alt={merchandise.alt} taste={{ width: '100%', show: 'block' }} />;
    }

    const commandHandler = (textual content) => {
        let reaction;
        let argsIndex = textual content.indexOf(' ');
        let command = argsIndex !== -1 ? textual content.substring(0, argsIndex) : textual content;

        transfer (command) {
            case 'date':
                reaction="As of late is " + new Date().toDateString();
                damage;

            case 'greet':
                reaction="Hola " + textual content.substring(argsIndex + 1) + '!';
                damage;

            case 'random':
                reaction = Math.flooring(Math.random() * 100);
                damage;

            case 'transparent':
                reaction = null;
                damage;

            default:
                reaction="Unknown command: " + command;
                damage;
        }

        if (reaction) {
            TerminalService.emit('reaction', reaction);
        }
        else {
            TerminalService.emit('transparent');
        }
    }

    useEffect(() => {
        TerminalService.on('command', commandHandler);

        const nodeService = new NodeService();
        const galleriaService = new PhotoService();

        galleriaService.getImages().then(records => setImages(records));
        nodeService.getTreeNodes().then(records => setNodes(records));

        PrimeReact.appendTo = 'self';

        go back () => {
            TerminalService.off('command', commandHandler);

            // reset
            PrimeReact.appendTo = null;
        }
    }, [])

    const get started = <i className="pi pi-apple"></i>;
    const finish = (
        <React.Fragment>
            <i className="pi pi-video" />
            <i className="pi pi-wifi" />
            <i className="pi pi-volume-up" />
            <span>Fri 13:07</span>
            <i className="pi pi-search" />
            <i className="pi pi-bars" />
        </React.Fragment>
    );


    go back (
        <>
        <div className="dock-demo">
            <h5>Elementary</h5>
            <div className="dock-window">
                <Dock fashion={dockBasicItems} place="backside" />
                <Dock fashion={dockBasicItems} place="height" />
                <Dock fashion={dockBasicItems} place="left" />
                <Dock fashion={dockBasicItems} place="proper" />
            </div>

            <h5>Complex</h5>
            <Tooltip className="dark-tooltip" goal=".dock-advanced .p-dock-action" my="middle+15 bottom-15" at="middle height" showDelay={150} />

            <Menubar fashion={menubarItems} get started={get started} finish={finish} />
            <div className="dock-window dock-advanced">
                <Toast ref={toast} />
                <Toast ref={toast2} place="top-center" />

                <Dock fashion={dockItems} />

                <Conversation visual={displayTerminal} breakpoints={{ '960px': '50vw' }} taste={{ width: '30vw' }} onHide={() => setDisplayTerminal(false)} maximizable blockScroll={false}>
                    <Terminal welcomeMessage="Welcome to PrimeReact (cmd: 'date', 'greet {0}', 'random' and 'transparent')" advised="primereact $" />
                </Conversation>

                <Conversation visual={displayFinder} breakpoints={{ '960px': '50vw' }} taste={{ width: '30vw', top: '18rem' }} onHide={() => setDisplayFinder(false)} maximizable blockScroll={false}>
                    <Tree worth={nodes} />
                </Conversation>

                <Galleria ref={galleria} worth={photographs} responsiveOptions={responsiveOptions} numVisible={2} taste={{ width: '400px' }}
                    round fullScreen showThumbnails={false} showItemNavigators merchandise={itemTemplate} />
            </div>
        </div>
        </>
    );
}

export default App;