feat(user): add component

components/index.ts

@@ -49,3 +49,4 @@ export { default as Tooltip } from './tooltip'
 export { default as Popover } from './popover'
 export { default as Slider } from './slider'
 export { default as Divider } from './divider'
+export { default as User } from './user'

components/user/index.ts

@@ -0,0 +1,6 @@
+import User from './user'
+import UserLink from './user-link'
+
+User.Link = UserLink
+
+export default User

components/user/user-link.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Link from '../link'
+import withDefaults from '../utils/with-defaults'
+
+interface Props {
+  href?: string
+  className?: string
+}
+
+const defaultProps = {
+  className: '',
+}
+
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
+export type UserLinkProps = Props & typeof defaultProps & NativeAttrs
+
+const UserLink = React.memo(
+  React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<UserLinkProps>>(({
+    href, className, children, ...props
+  }, ref: React.Ref<HTMLAnchorElement>) => {
+  
+    return (
+      <div className={className} {...props}>
+        <Link ref={ref} href={href} pure color target="_blank" rel="noopener">
+          {children}
+        </Link>
+        <style jsx>{`
+          div :global(a:hover) {
+            opacity: .7;
+          }
+        `}</style>
+      </div>
+    )
+  })
+)
+
+export default withDefaults(UserLink, defaultProps)

components/user/user.tsx

@@ -0,0 +1,86 @@
+import React, { ReactNode } from 'react'
+import Avatar from '../avatar'
+import useTheme from '../styles/use-theme'
+import UserLink from './user-link'
+
+interface Props {
+  name: ReactNode | string
+  src?: string
+  text?: string
+  className?: string
+}
+
+const defaultProps = {
+  className: '',
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type UserProps = Props & typeof defaultProps & NativeAttrs
+
+const User: React.FC<React.PropsWithChildren<UserProps>> = ({
+  src, text, name, children, className, ...props
+}) => {
+  const theme = useTheme()
+  
+  return (
+    <div className={`user ${className}`} {...props}>
+      <Avatar src={src} text={text} size={32} />
+      <div className="names">
+        <span className="name">{name}</span>
+        <span className="social">{children}</span>
+      </div>
+
+      <style jsx>{`
+        .user {
+          display: inline-flex;
+          padding: 0 ${theme.layout.gapHalf};
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: ${theme.layout.gapHalf};
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: ${theme.palette.accents_8};
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: ${theme.palette.accents_6};
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+type UserComponent<P = {}> = React.FC<P> & {
+  Link: typeof UserLink
+}
+
+type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
+
+(User as UserComponent<ComponentProps>).defaultProps = defaultProps
+
+export default User as UserComponent<ComponentProps>