90 lines
1.9 KiB
TypeScript
90 lines
1.9 KiB
TypeScript
import styled, { css } from "styled-components";
|
|
import { Base } from "../../themes";
|
|
import { Text } from "../text";
|
|
|
|
const StyledIcon = styled.div<{
|
|
size: string;
|
|
radius: string;
|
|
isArchive?: boolean;
|
|
color: string;
|
|
}>`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
height: ${(props) => props.size};
|
|
|
|
width: ${(props) => props.size};
|
|
|
|
.room-background {
|
|
height: ${(props) => props.size};
|
|
|
|
width: ${(props) => props.size};
|
|
|
|
border-radius: ${(props) => props.radius};
|
|
vertical-align: middle;
|
|
background: ${(props) =>
|
|
props.isArchive
|
|
? props.theme.roomIcon.backgroundArchive
|
|
: `#${props.color}`};
|
|
position: absolute;
|
|
opacity: ${(props) => props.theme.roomIcon.opacityBackground};
|
|
}
|
|
|
|
.room-title {
|
|
font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
|
|
font-weight: 700;
|
|
line-height: 16px;
|
|
color: #ffffff;
|
|
position: relative;
|
|
${(props) =>
|
|
!props.theme.isBase &&
|
|
!props.isArchive &&
|
|
css`
|
|
color: ${`#${props.color}`};
|
|
`};
|
|
}
|
|
`;
|
|
|
|
StyledIcon.defaultProps = { theme: Base };
|
|
|
|
interface RoomIconProps {
|
|
title: string;
|
|
isArchive?: boolean;
|
|
color: string;
|
|
size?: string;
|
|
radius?: string;
|
|
}
|
|
|
|
const RoomIcon = ({
|
|
title,
|
|
isArchive = false,
|
|
color,
|
|
size = "32px",
|
|
radius = "6px",
|
|
}: RoomIconProps) => {
|
|
const titleWithoutSpaces = title.replace(/\s+/g, " ").trim();
|
|
const indexAfterLastSpace = titleWithoutSpaces.lastIndexOf(" ");
|
|
const secondCharacter =
|
|
indexAfterLastSpace === -1
|
|
? ""
|
|
: titleWithoutSpaces[indexAfterLastSpace + 1];
|
|
|
|
const roomTitle = (title[0] + secondCharacter).toUpperCase();
|
|
|
|
return (
|
|
<StyledIcon
|
|
color={color}
|
|
size={size}
|
|
radius={radius}
|
|
isArchive={isArchive}
|
|
data-testid="room-icon"
|
|
>
|
|
<div className="room-background" />
|
|
<Text className="room-title">{roomTitle}</Text>
|
|
</StyledIcon>
|
|
);
|
|
};
|
|
|
|
export { RoomIcon };
|