mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor icons passed as props with the new way (#1492)

Browse Source 
* Refactor icons passed as props with the new way

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Update more files

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Fix according to review

* Fix according to review

* Fix according to review

* Fix chromatic regressions

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-10 19:39:17 +01:00
committed by GitHub
parent 89fed80537
commit fb737e2021
82 changed files with 341 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
front/src/modules/ui/navbar/components/NavItem.tsx
View File

@ -1,19 +1,20 @@
import { ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { isNavbarOpenedState } from '../../layout/states/isNavbarOpenedState';
type OwnProps = {
type NavItemProps = {
label: string;
to?: string;
onClick?: () => void;
Icon: IconComponent;
active?: boolean;
icon: ReactNode;
danger?: boolean;
soon?: boolean;
};
@ -81,7 +82,16 @@ const StyledSoonPill = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
`;
function NavItem({ label, icon, to, onClick, active, danger, soon }: OwnProps) {
function NavItem({
label,
Icon,
to,
onClick,
active,
danger,
soon,
}: NavItemProps) {
const theme = useTheme();
const navigate = useNavigate();
const [, setIsNavbarOpened] = useRecoilState(isNavbarOpenedState);
@ -107,7 +117,7 @@ function NavItem({ label, icon, to, onClick, active, danger, soon }: OwnProps) {
danger={danger}
soon={soon}
>
{icon}
{Icon && <Icon size={theme.icon.size.md} />}
<StyledItemLabel>{label}</StyledItemLabel>
{soon && <StyledSoonPill>Soon</StyledSoonPill>}
</StyledItem>