54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
interface CollabUserIconProps {
|
||
|
|
color: string;
|
||
|
|
userImage: string;
|
||
|
|
userName: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const CollabUserIcon: React.FC<CollabUserIconProps> = ({
|
||
|
|
color,
|
||
|
|
userImage,
|
||
|
|
userName,
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "6px",
|
||
|
|
// transform:"translate(-20%, 0%)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={userImage}
|
||
|
|
alt={userName}
|
||
|
|
style={{
|
||
|
|
width: "30px",
|
||
|
|
height: "30px",
|
||
|
|
outline: `2px solid ${color}`,
|
||
|
|
borderRadius: "50%",
|
||
|
|
objectFit: 'cover'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
padding: "3px 5px",
|
||
|
|
backgroundColor: color,
|
||
|
|
borderRadius: "6px",
|
||
|
|
color: "white",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{userName}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CollabUserIcon;
|