42debc6d11
## Description Rename `design-system` package to `@appsmith/ads` ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10319507327> > Commit: 65d9664dd75b750496458a6e1652e0da858e1fc6 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319507327&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 09 Aug 2024 13:47:50 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import React, { useContext } from "react";
|
|
import { getInitialsAndColorCode } from "utils/AppsmithUtils";
|
|
import styled, { ThemeContext } from "styled-components";
|
|
import { Colors } from "constants/Colors";
|
|
import { Avatar } from "@appsmith/ads";
|
|
|
|
export const Profile = styled.div<{ backgroundColor?: string; size?: number }>`
|
|
/* width: ${(props) => props.size || 34}px;
|
|
height: ${(props) => props.size || 34}px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: ${(props) => props.backgroundColor};
|
|
flex-shrink: 0;
|
|
&& span {
|
|
color: ${Colors.BLACK};
|
|
letter-spacing: normal;
|
|
} */
|
|
|
|
/* img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
} */
|
|
`;
|
|
|
|
export default function ProfileImage(props: {
|
|
userName?: string;
|
|
className?: string;
|
|
commonName?: string;
|
|
size?: string;
|
|
source?: string;
|
|
}) {
|
|
const theme = useContext(ThemeContext);
|
|
|
|
const initialsAndColorCode = getInitialsAndColorCode(
|
|
props.commonName || props.userName,
|
|
theme.colors.appCardColors,
|
|
);
|
|
|
|
return (
|
|
<Avatar
|
|
className={props.className}
|
|
firstLetter={props.commonName || initialsAndColorCode[0]}
|
|
image={props.source}
|
|
label={props.commonName || initialsAndColorCode[0]}
|
|
// @ts-expect-error Fix this the next time the file is edited
|
|
size={props.size}
|
|
/>
|
|
);
|
|
}
|