users screen + userCard component

src/components/user-card/index.tsx

@@ -0,0 +1 @@
+export { UserCard } from './user-card'

src/components/user-card/style.ts

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
+
+export const Avatar = styled.img`
+  width: 96px;
+  height: 96px;
+  margin: 0 auto;
+  border-radius: 6px;
+`
+
+export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
+  list-style: none;
+  background-color: #ffffff;
+  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 2px 2px 6px #0000005c;
+  transition: all 0.5;
+  position: relative;
+  width: 180px;
+  min-height: 190px;
+  max-height: 200px;
+  margin-right: 12px;
+  padding-bottom: 22px;
+  ${({ width }) =>
+    width
+      ? css`
+          width: ${width};
+        `
+      : ''}
+
+  ${(props) =>
+    props.warn
+      ? css`
+          background-color: #000000;
+          opacity: 0.7;
+          color: #e4e4e4;
+        `
+      : ''}
+`
+
+export const AddMissedButton = styled.button`
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  border: none;
+  background-color: #00000000;
+  opacity: 0.2;
+
+  :hover {
+    cursor: pointer;
+    opacity: 1;
+  }
+`

src/components/user-card/user-card.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { sha256 } from 'js-sha256'
+
+import { User } from '../../__data__/model'
+
+import { AddMissedButton, Avatar, Wrapper } from './style'
+
+export function getGravatarURL(email, user) {
+  if (!email) return void 0
+  const address = String(email).trim().toLowerCase()
+  const hash = sha256(address)
+
+  return `https://www.gravatar.com/avatar/${hash}?d=robohash`
+}
+
+export const UserCard = ({
+  student,
+  present,
+  onAddUser,
+  wrapperAS,
+  width
+}: {
+  student: User
+  present: boolean
+  width?: string | number
+  onAddUser?: (user: User) => void
+  wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+}) => {
+  return (
+    <Wrapper warn={!present} as={wrapperAS} width={width}>
+      <Avatar src={student.picture || getGravatarURL(student.email, null)} />
+      <p style={{ marginTop: 6 }}>
+        {student.name || student.preferred_username}{' '}
+      </p>
+      {onAddUser && !present && (
+        <AddMissedButton onClick={() => onAddUser(student)}>
+          add
+        </AddMissedButton>
+      )}
+    </Wrapper>
+  )
+}
+
+UserCard.defaultProps = {
+  wrapperAS: 'div',
+  onAddUser: void 0,
+}