Merge pull request #125 from the-programmers-hangout/feat-resources-contributor-popover

feat(resources): add popover to contributors

src/components/ResourceHeader/index.tsx

@@ -8,7 +8,11 @@ import * as SC from "./styles"
 interface IResourceHeaderProps {
   relativePath: string
   title: string
-  authors: string[]
+  authors: Array<{
+    avatar: string
+    hash: string
+    name: string
+  }>
   createdAt: string
   timeToRead: number
   recommendedReading: string[]
@@ -66,8 +70,15 @@ export const ResourceHeader: FC<IResourceHeaderProps> = ({
 
       <SC.Top>
         <SC.Meta>
-          <StackedAvatars authors={authors} /> {authors.length} contributor
+          <StackedAvatars authors={authors} />
-          {authors.length > 1 && "s"}
+          <SC.PopoverToggler>
+            {authors.length} contributor{authors.length > 1 && "s"}
+            <SC.Popover>
+              {authors
+                .map(author => `${author.name}#${author.hash}`)
+                .join(", ")}
+            </SC.Popover>
+          </SC.PopoverToggler>
         </SC.Meta>
         <SC.Meta>{dateToHuman}</SC.Meta>
         <SC.Meta>

src/components/ResourceHeader/styles.tsx

@@ -93,3 +93,43 @@ export const ExtraLinkExternal = styled.a`
 export const ExtraLinkText = styled.div`
   text-decoration: underline;
 `
+
+export const Popover = styled.div`
+  display: none;
+  position: absolute;
+  top: 100%;
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  background: ${props =>
+    props.theme.name === "dark"
+      ? lighten(0.1, props.theme.main.background)
+      : darken(0.1, props.theme.main.background)};
+
+  &::before {
+    position: absolute;
+    left: 16px;
+    bottom: 100%;
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 3.5px 4px 3.5px;
+    border-color: transparent transparent
+      ${props =>
+        props.theme.name === "dark"
+          ? lighten(0.1, props.theme.main.background)
+          : darken(0.1, props.theme.main.background)}
+      transparent;
+  }
+`
+
+export const PopoverToggler = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &:hover ${Popover} {
+    display: block;
+  }
+`