gitstart-twenty
00a3c8ca2b
* Change to using arrow functions Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Add lint rule --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { IconComponent } from '@/ui/icon/types/IconComponent';
|
|
|
|
type OwnProps = {
|
|
viewName: string;
|
|
ViewIcon?: IconComponent;
|
|
};
|
|
|
|
const StyledTitle = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
height: ${({ theme }) => theme.spacing(8)};
|
|
padding-left: ${({ theme }) => theme.spacing(2)};
|
|
padding-right: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledIcon = styled.div`
|
|
display: flex;
|
|
|
|
& > svg {
|
|
height: ${({ theme }) => theme.icon.size.md}px;
|
|
width: ${({ theme }) => theme.icon.size.md}px;
|
|
}
|
|
`;
|
|
|
|
const StyledText = styled.span`
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
export const ColumnHead = ({ viewName, ViewIcon }: OwnProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<StyledTitle>
|
|
<StyledIcon>
|
|
{ViewIcon && <ViewIcon size={theme.icon.size.md} />}
|
|
</StyledIcon>
|
|
<StyledText>{viewName}</StyledText>
|
|
</StyledTitle>
|
|
);
|
|
};
|