@material-ui/icons#Gavel TypeScript Examples

The following examples show how to use @material-ui/icons#Gavel. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: with-different-variants.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
withDifferentVariants = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const navGroupItems: NavItem[] = [
        {
            title: 'Settings',
            itemID: '1',
            icon: <Settings />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Legal',
            itemID: '2',
            icon: <Gavel />,
            onClick: (): void => setSelected('2'),
        },
    ];

    return (
        <Drawer
            open={boolean('open', true)}
            variant={select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent')}
            condensed={boolean('condensed (rail only)', false)}
            ModalProps={{
                disableEnforceFocus: true,
            }}
            activeItem={selected}
        >
            <DrawerHeader icon={<Menu />} title={'Drawer with variants'} />
            <DrawerBody>
                <DrawerNavGroup items={navGroupItems} />
            </DrawerBody>
        </Drawer>
    );
}
Example #2
Source File: with-footer.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
withFooter = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const navGroupItems: NavItem[] = [
        {
            title: 'Settings',
            itemID: '1',
            icon: <Settings />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Legal',
            itemID: '2',
            icon: <Gavel />,
            onClick: (): void => setSelected('2'),
        },
    ];

    return (
        <Drawer open={boolean('open', true)} activeItem={selected}>
            <DrawerHeader icon={<Menu />} title={'Footer Example'} />
            <DrawerBody>
                <DrawerNavGroup items={navGroupItems} />
            </DrawerBody>

            <DrawerFooter
                backgroundColor={color('backgroundColor', Colors.white[50])}
                hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
                divider={boolean('divider', true)}
            >
                <div
                    style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        flexDirection: 'row',
                        padding: 16,
                    }}
                >
                    <img
                        src={useDarkMode() ? EatonFooterLogoDark : EatonFooterLogoLight}
                        alt="Eaton Logo"
                        height={28}
                        width={'auto'}
                    />
                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                        <Typography
                            variant={'caption'}
                        >{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
                        <Typography variant={'caption'}>All Rights Reserved</Typography>
                    </div>
                </div>
            </DrawerFooter>
        </Drawer>
    );
}
Example #3
Source File: with-multiple-DrawerNavGroups.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
withMultipleNavGroups = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const navGroupItems1: NavItem[] = [
        {
            title: 'Identity Management',
            itemID: '1',
            icon: <Person />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Calendar',
            itemID: '2',
            icon: <Today />,
            onClick: (): void => setSelected('2'),
        },
        {
            title: 'Accessibility',
            itemID: '3',
            icon: <Accessibility />,
            onClick: (): void => setSelected('3'),
        },
        {
            title: 'Notifications',
            itemID: '4',
            icon: <NotificationsActive />,
            onClick: (): void => setSelected('4'),
        },
    ];

    const navGroupItems2: NavItem[] = [
        {
            title: 'Settings',
            itemID: '2-1',
            icon: <Settings />,
            onClick: (): void => setSelected('2-1'),
        },
        {
            title: 'Legal',
            itemID: '2-2',
            icon: <Gavel />,
            onClick: (): void => setSelected('2-2'),
        },
    ];

    return (
        <Drawer open={boolean('open', true)} activeItem={selected}>
            <DrawerHeader
                icon={<Menu />}
                title={'Brightlayer UI Drawer'}
                subtitle={'with multiple navigation groups'}
            />
            <DrawerBody>
                <DrawerNavGroup
                    title={text('navGroup[0].title', 'First DrawerNavGroup')}
                    titleDivider={boolean('titleDivider', true)}
                    items={navGroupItems1}
                />
                {boolean('Add Spacer', true) && <Spacer />}
                <DrawerNavGroup
                    title={text('navGroup[1].title', 'Second DrawerNavGroup')}
                    titleDivider={boolean('titleDivider', true)}
                    items={navGroupItems2}
                />
            </DrawerBody>
        </Drawer>
    );
}