Merge pull request #36 from the-programmers-hangout/feat-stacked-avatars-for-contributors

feat: stacked avatars for contributors

src/components/ResourceHeader/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 
+import { StackedAvatars } from "../StackedAvatars"
 import ChevronUp from "../../icons/chevron-up.svg"
 import * as SC from "./styles"
 
@@ -29,11 +30,7 @@ export function ResourceHeader({
       <SC.Title>{title}</SC.Title>
 
       <SC.Top>
-        <SC.AuthorAvatars>
+        <StackedAvatars authors={authors} />
-          {authors.map(author => (
-            <SC.AuthorAvatar src={author.avatar} />
-          ))}
-        </SC.AuthorAvatars>
         <SC.Meta>
           {authors.length} contributor{authors.lenght > 1 && "s"}
         </SC.Meta>

src/components/ResourceHeader/styles.tsx

@@ -19,17 +19,6 @@ export const Title = styled.h1`
   letter-spacing: -1.75px;
 `
 
-export const AuthorAvatars = styled.div`
-  margin-right: 16px;
-`
-
-export const AuthorAvatar = styled.img`
-  width: 32px;
-  height: 32px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-`
-
 export const Meta = styled.div`
   & + &::before {
     content: "•";

src/components/StackedAvatars/index.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+import * as SC from "./styles"
+
+interface StackedAvatarsProps {
+  authors: any
+}
+
+export function StackedAvatars({ authors }: StackedAvatarsProps) {
+  return (
+    <SC.StackedAvatarsWrapper count={authors.length}>
+      {authors.map((author, index) => (
+        <SC.AuthorAvatar src={author.avatar} index={index} />
+      ))}
+    </SC.StackedAvatarsWrapper>
+  )
+}

src/components/StackedAvatars/styles.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components"
+
+const AVATAR_SIZE = 32
+const OVERLAP_AMOUT = 0.4 // 0 to 1
+
+function containerWidth(count: number): number {
+  if (count === 0) {
+    return 0
+  }
+
+  return AVATAR_SIZE + count * AVATAR_SIZE * (1 - OVERLAP_AMOUT)
+}
+
+export const StackedAvatarsWrapper = styled.div<{ count: number }>`
+  display: flex;
+  margin-right: 16px;
+  width: ${props => containerWidth(props.count)}px;
+`
+
+export const AuthorAvatar = styled.img<{ index: number }>`
+  position: relative;
+  width: ${AVATAR_SIZE}px;
+  height: ${AVATAR_SIZE}px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  z-index: ${props => props.index};
+  left: -${props => AVATAR_SIZE * OVERLAP_AMOUT * props.index}px;
+`