crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-02 02:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update avatar component

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-22 01:53:09 +01:00
parent 7e7355de80
commit d9e2eb72c0
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Avatar/index.tsx
+3 -2
View File
@@ -1,14 +1,15 @@
import { Wrapper } from './styles'; import { Wrapper } from './styles';
type AvatarProps = { type AvatarProps = {
className?: string;
color?: 'client' | 'productOwner' | 'developer' | 'admin' | string; color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
size?: 'small' | 'big'; size?: 'small' | 'big';
text: string; text: string;
}; };
const Avatar = ({ color, size = 'small', text }: AvatarProps) => { const Avatar = ({ color, size = 'small', text, className }: AvatarProps) => {
return ( return (
<Wrapper color={color} size={size}> <Wrapper color={color} size={size} className={className}>
{text} {text}
</Wrapper> </Wrapper>
); );
src/components/Avatar/styles.ts
+2 -1
View File
@@ -6,11 +6,12 @@ type WrapperProps = {
}; };
export const Wrapper = styled.div<WrapperProps>` export const Wrapper = styled.div<WrapperProps>`
user-select: none;
border-radius: 50%; border-radius: 50%;
background: ${({ theme, color }) => background: ${({ theme, color }) =>
color ? theme.colors[color].main : theme.colors.client.main}; color ? theme.colors[color].main : theme.colors.client.main};
color: ${({ theme }) => theme.colors.white.main}; color: ${({ theme }) => theme.colors.white.main};
display: grid; display: inline-grid;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;