Merge pull request vczb#24 from yamitrvg12/main

create avatar component
SAKANA7 · Oct 3, 2022 · 85464e4 · 85464e4
2 parents 2f8673c + 05ca710
commit 85464e4
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 0 deletions.
diff --git a/src/packages/Avatar/index.tsx b/src/packages/Avatar/index.tsx
@@ -0,0 +1,25 @@
+import React, { BaseHTMLAttributes } from 'react'
+import * as S from './styles'
+
+export type AvatarProps = {
+  children: React.ReactNode
+  src?: string
+  alt?: string
+  size?: 'xsmall' | 'small' | 'medium' | 'large'
+  variant?: 'circle' | 'square' | 'rounded'
+} & BaseHTMLAttributes<HTMLDivElement>
+
+const Avatar = ({
+  children,
+  src,
+  alt,
+  size,
+  variant,
+  ...props
+}: AvatarProps) => (
+  <S.Wrapper size={size} variant={variant} {...props}>
+    {src ? <S.Img src={src} alt={alt} /> : children}
+  </S.Wrapper>
+)
+
+export default Avatar
diff --git a/src/packages/Avatar/stories.tsx b/src/packages/Avatar/stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react/types-6-0'
+import Avatar, { AvatarProps } from '.'
+
+export default {
+  title: 'Avatar',
+  component: Avatar,
+  args: {
+    children: 'OP',
+    src: 'https://picsum.photos/id/237/300/300',
+    alt: 'Random image',
+    size: 'medium',
+    variant: 'circle'
+  }
+} as Meta
+
+export const Default: Story<AvatarProps> = (args) => <Avatar {...args} />
diff --git a/src/packages/Avatar/styles.ts b/src/packages/Avatar/styles.ts
@@ -0,0 +1,40 @@
+import styled, { css, DefaultTheme } from 'styled-components'
+import { AvatarProps } from '.'
+
+const variantShape = {
+  circle: () => css`
+    border-radius: 50%;
+  `,
+  square: () => css`
+    border-radius: 0;
+  `,
+  rounded: (theme: DefaultTheme) => css`
+    border-radius: ${theme.border.radius};
+  `
+}
+
+export const Wrapper = styled.div<Pick<AvatarProps, 'size' | 'variant'>>`
+  ${({ theme, size = 'medium', variant = 'circle' }) => css`
+    border-radius: 50%;
+    align-items: center;
+    font-size: ${theme.font.sizes.large};
+    width: ${theme.avatarSizes[size]};
+    height: ${theme.avatarSizes[size]};
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    display: inline-flex;
+    color: ${theme.colors.base.white};
+    background-color: ${theme.colors.neutral.dark};
+    ${!!variant && variantShape[variant](theme)}}
+  `}
+`
+
+export const Img = styled.img`
+  ${() => css`
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    object-fit: cover;
+  `}
+`
diff --git a/src/packages/index.ts b/src/packages/index.ts
@@ -19,3 +19,4 @@ export { default as GridFluid } from './GridFluid'
 export { default as TextContent } from './TextContent'
 export { default as Divider } from './Divider'
 export { default as Card } from './Card'
+export { default as Avatar } from './Avatar'
diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
@@ -58,5 +58,11 @@ export default {
   shadows: {
     default: 'rgb(0 0 0 / 15%) 0px 2rem 8rem 0',
     focus: `0 0 0.5rem ${colors.secondary.medium}`
+  },
+  avatarSizes: {
+    large: '6rem',
+    medium: '4rem',
+    small: '3rem',
+    xsmall: '2rem'
   }
 } as const