45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { getThemeDetails } from "selectors/themeSelectors";
|
|
import { getInitialsAndColorCode } from "utils/AppsmithUtils";
|
|
import Text, { TextType } from "components/ads/Text";
|
|
import styled from "styled-components";
|
|
|
|
export const Profile = styled.div<{ backgroundColor?: string }>`
|
|
width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: ${(props) => props.backgroundColor};
|
|
&& span {
|
|
color: ${(props) => props.theme.colors.text.highlight};
|
|
}
|
|
`;
|
|
|
|
export default function ProfileImage(props: {
|
|
userName?: string;
|
|
className?: string;
|
|
commonName?: string;
|
|
}) {
|
|
const themeDetails = useSelector(getThemeDetails);
|
|
|
|
const initialsAndColorCode = getInitialsAndColorCode(
|
|
props.commonName || props.userName,
|
|
themeDetails.theme.colors.appCardColors,
|
|
);
|
|
|
|
return (
|
|
<Profile
|
|
backgroundColor={initialsAndColorCode[1]}
|
|
className={props.className}
|
|
>
|
|
<Text type={TextType.H6} highlight>
|
|
{props.commonName || initialsAndColorCode[0]}
|
|
</Text>
|
|
</Profile>
|
|
);
|
|
}
|