All files / Components/Drawer DrawerItem.js

100% Statements 5/5
100% Branches 12/12
100% Functions 1/1
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46              1x   16x   16x                       16x                 16x                          
import classNames from 'classnames';
import React, { useContext } from 'react';
import { WebAppsUXContext } from '../../Context';
import Badge from '../Badge';
import Icon from '../Icon';
import Link from '../Link';
 
const DrawerItem = ({ badge, color, icon, children, ...props }) => {
 
    const { theme } = useContext(WebAppsUXContext);
 
    const linkClasses = classNames(
        'flex',
        'items-center',
        'justify-start',
        'px-8',
        'py-5',
        'cursor-pointer',
        color
            ? `hover:bg-${color}-50 dark:hover:bg-${color}-900`
            : 'hover:bg-gray-100 dark:hover:bg-gray-800',
    )
 
    const routerLinkProps = props.to && {
        exact: true,
        activeClassName: classNames(
            color
                ? `bg-${color}-50 hover:bg-${color}-100 dark:bg-${color}-900 font-semibold`
                : `bg-${theme}-50 hover:bg-${theme}-100 dark:bg-${theme}-900 font-semibold`
        )
    }
 
    return (
        <Link
            className={linkClasses}
            {...routerLinkProps}
            {...props}
        >
            {icon && <Icon icon={icon} className="h-5 w-5 mr-3" />}
            <div>{children}</div>
            {badge && <Badge color={color || theme} pill className="ml-auto" {...{ ...badge, text: null }}>{badge.text}</Badge>}
        </Link>
    )
}
 
export default DrawerItem;