bec4da496d
Follow-up of https://github.com/twentyhq/twenty/pull/7979 Navigation between settings and fields tabs is now reflected in URL. <img width="1106" alt="Capture d’écran 2024-11-07 à 18 38 57" src="https://github.com/user-attachments/assets/24b153ef-9e68-4aa2-8e3a-6bf70834c5ad"> --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Co-authored-by: Weiko <corentin@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
96 lines
2.3 KiB
TypeScript
96 lines
2.3 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { ReactElement } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { IconComponent, Pill } from 'twenty-ui';
|
|
|
|
type TabProps = {
|
|
id: string;
|
|
title: string;
|
|
Icon?: IconComponent;
|
|
active?: boolean;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
disabled?: boolean;
|
|
pill?: string | ReactElement;
|
|
to?: string;
|
|
};
|
|
|
|
const StyledTab = styled.button<{
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
to?: string;
|
|
}>`
|
|
align-items: center;
|
|
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
|
|
border-color: ${({ theme, active }) =>
|
|
active ? theme.border.color.inverted : 'transparent'};
|
|
color: ${({ theme, active, disabled }) =>
|
|
active
|
|
? theme.font.color.primary
|
|
: disabled
|
|
? theme.font.color.light
|
|
: theme.font.color.secondary};
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-top: none;
|
|
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
justify-content: center;
|
|
margin-bottom: 0;
|
|
padding: ${({ theme }) => theme.spacing(2) + ' 0'};
|
|
pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
|
|
text-decoration: none;
|
|
`;
|
|
|
|
const StyledHover = styled.span`
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
padding: ${({ theme }) => theme.spacing(1)};
|
|
padding-left: ${({ theme }) => theme.spacing(2)};
|
|
padding-right: ${({ theme }) => theme.spacing(2)};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
|
|
&:hover {
|
|
background: ${({ theme }) => theme.background.tertiary};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
}
|
|
&:active {
|
|
background: ${({ theme }) => theme.background.quaternary};
|
|
}
|
|
`;
|
|
|
|
export const Tab = ({
|
|
id,
|
|
title,
|
|
Icon,
|
|
active = false,
|
|
onClick,
|
|
className,
|
|
disabled,
|
|
pill,
|
|
to,
|
|
}: TabProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<StyledTab
|
|
onClick={onClick}
|
|
active={active}
|
|
className={className}
|
|
disabled={disabled}
|
|
data-testid={'tab-' + id}
|
|
as={to ? Link : 'button'}
|
|
to={to}
|
|
>
|
|
<StyledHover>
|
|
{Icon && <Icon size={theme.icon.size.md} />}
|
|
{title}
|
|
{pill && typeof pill === 'string' ? <Pill label={pill} /> : pill}
|
|
</StyledHover>
|
|
</StyledTab>
|
|
);
|
|
};
|