Repository: zeit-ui/react
Pull request #108 (2020-04-17 05:25:18)

feat(user): add component
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information





Patch:
diff --git a/components/index.ts b/components/index.ts
index fc60bd3..ff434b4 100644
--- a/components/index.ts
+++ b/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'
diff --git a/components/user/index.ts b/components/user/index.ts
new file mode 100644
index 0000000..ec638af
--- /dev/null
+++ b/components/user/index.ts
@@ -0,0 +1,6 @@
+import User from './user'
+import UserLink from './user-link'
+
+User.Link = UserLink
+
+export default User
diff --git a/components/user/user-link.tsx b/components/user/user-link.tsx
new file mode 100644
index 0000000..639f769
--- /dev/null
+++ b/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)
diff --git a/components/user/user.tsx b/components/user/user.tsx
new file mode 100644
index 0000000..b145331
--- /dev/null
+++ b/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>
diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json
index 0afec2f..4131223 100644
--- a/lib/data/metadata-en-us.json
+++ b/lib/data/metadata-en-us.json
@@ -1,1 +1,1 @@
-[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]}]},{"name":"customization","children":[]}]
+[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]}]},{"name":"customization","children":[]}]
diff --git a/lib/data/metadata-zh-cn.json b/lib/data/metadata-zh-cn.json
index 0d174a3..ea3a120 100644
--- a/lib/data/metadata-zh-cn.json
+++ b/lib/data/metadata-zh-cn.json
@@ -1,1 +1,1 @@
-[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"通用"},{"name":"文本 Text","url":"/zh-cn/components/text","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
+[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"通用"},{"name":"文本 Text","url":"/zh-cn/components/text","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
diff --git a/pages/en-us/components/user.mdx b/pages/en-us/components/user.mdx
new file mode 100644
index 0000000..a636bfa
--- /dev/null
+++ b/pages/en-us/components/user.mdx
@@ -0,0 +1,59 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { User, Spacer } from 'components'
+
+export const meta = {
+  title: 'User',
+  group: 'Data Display',
+}
+
+## User
+
+Display user profile or social information.
+
+<Playground
+  desc="Show username."
+  scope={{ User, Spacer }}
+  code={`
+<User src="https://zeit.co/api/www/avatar/?u=evilrabbit&s=160" name="Evil Rabbit" />
+`} />
+
+<Playground
+  title="Description"
+  desc="Show an extra description."
+  scope={{ User, Spacer }}
+  code={`
+<User src="https://unix.bio/assets/avatar.png" name="Witt">
+  JavaScript engineer
+</User>
+`} />
+
+<Playground
+  title="Social"
+  desc="Show link below user name."
+  scope={{ User, Spacer }}
+  code={`
+<User src="https://unix.bio/assets/avatar.png" name="Witt">
+  <User.Link href="https://twitter.com/echo_witt">@echo_witt</User.Link>
+</User>
+`} />
+
+<Attributes edit="/pages/en-us/components/user.mdx">
+<Attributes.Title>User.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **name**(required) | user name | `ReactNode` / `string` | - | - |
+| **src** | avatar url | `string` | - | - |
+| **text** | display text when image is missing | `string` | - | - |
+| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
+
+<Attributes.Title>User.Link.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **href** | link address | `string` | - | - |
+| ... | native props | `AnchorHTMLAttributes` | `'id', 'name', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>
diff --git a/pages/zh-cn/components/user.mdx b/pages/zh-cn/components/user.mdx
new file mode 100644
index 0000000..9b8911f
--- /dev/null
+++ b/pages/zh-cn/components/user.mdx
@@ -0,0 +1,59 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { User, Spacer } from 'components'
+
+export const meta = {
+  title: '用户 User',
+  group: '数据展示',
+}
+
+## User / 用户
+
+展示用户的介绍或是社交链接。
+
+<Playground
+  desc="仅展示用户名。"
+  scope={{ User, Spacer }}
+  code={`
+<User src="https://zeit.co/api/www/avatar/?u=evilrabbit&s=160" name="Evil Rabbit" />
+`} />
+
+<Playground
+  title="描述"
+  desc="在用户名下方展示简短的用户介绍。"
+  scope={{ User, Spacer }}
+  code={`
+<User src="https://unix.bio/assets/avatar.png" name="维特">
+  JavaScript 工程师
+</User>
+`} />
+
+<Playground
+  title="社交"
+  desc="自定义用户的社交链接与文字。"
+  scope={{ User, Spacer }}
+  code={`
+<User src="https://unix.bio/assets/avatar.png" name="Witt">
+  <User.Link href="https://twitter.com/echo_witt">@echo_witt</User.Link>
+</User>
+`} />
+
+<Attributes edit="/pages/en-us/components/user.mdx">
+<Attributes.Title>User.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **name**(必须值) | 用户名 | `ReactNode` / `string` | - | - |
+| **src** | 头像图片地址 | `string` | - | - |
+| **text** | 以文字方式显示头像 | `string` | - | - |
+| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
+
+<Attributes.Title>User.Link.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **href** | 链接地址 | `string` | - | - |
+| ... | 原生属性 | `AnchorHTMLAttributes` | `'id', 'name', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>


Test patch:
diff --git a/components/user/__tests__/__snapshots__/index.test.tsx.snap b/components/user/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..09181db
--- /dev/null
+++ b/components/user/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,4159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` User should support image and text 1`] = `
+initialize {
+  "0": Object {
+    "attribs": Object {},
+    "children": Array [
+      Object {
+        "attribs": Object {
+          "class": "user ",
+        },
+        "children": Array [
+          Object {
+            "attribs": Object {
+              "class": "avatar ",
+            },
+            "children": Array [
+              Object {
+                "attribs": Object {
+                  "class": "avatar-text",
+                },
+                "children": Array [
+                  Object {
+                    "data": "witt",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": [Circular],
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": Object {
+                  "attribs": Object {
+                    "class": "avatar-text",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": [Circular],
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+            ],
+            "name": "span",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": Object {
+              "attribs": Object {
+                "class": "names",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+              ],
+              "name": "div",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+              "parent": [Circular],
+              "prev": [Circular],
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            "parent": [Circular],
+            "prev": null,
+            "type": "tag",
+            "x-attribsNamespace": Object {
+              "class": undefined,
+            },
+            "x-attribsPrefix": Object {
+              "class": undefined,
+            },
+          },
+          Object {
+            "attribs": Object {
+              "class": "names",
+            },
+            "children": Array [
+              Object {
+                "attribs": Object {
+                  "class": "name",
+                },
+                "children": Array [
+                  Object {
+                    "data": "witt",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": [Circular],
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              Object {
+                "attribs": Object {
+                  "class": "social",
+                },
+                "children": Array [],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": [Circular],
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+            ],
+            "name": "div",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": [Circular],
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+            "parent": [Circular],
+            "prev": Object {
+              "attribs": Object {
+                "class": "avatar ",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "avatar-text",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "avatar-text",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+              ],
+              "name": "span",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": [Circular],
+              "parent": [Circular],
+              "prev": null,
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            "type": "tag",
+            "x-attribsNamespace": Object {
+              "class": undefined,
+            },
+            "x-attribsPrefix": Object {
+              "class": undefined,
+            },
+          },
+          Object {
+            "attribs": Object {},
+            "children": Array [
+              Object {
+                "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                "next": null,
+                "parent": [Circular],
+                "prev": null,
+                "type": "text",
+              },
+            ],
+            "name": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": null,
+            "parent": [Circular],
+            "prev": Object {
+              "attribs": Object {
+                "class": "names",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+              ],
+              "name": "div",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": [Circular],
+              "parent": [Circular],
+              "prev": Object {
+                "attribs": Object {
+                  "class": "avatar ",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "avatar-text",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {},
+                      "children": Array [
+                        Object {
+                          "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "style",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "style",
+                      "x-attribsNamespace": Object {},
+                      "x-attribsPrefix": Object {},
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "avatar-text",
+                      },
+                      "children": Array [
+                        Object {
+                          "data": "witt",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                ],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            "type": "style",
+            "x-attribsNamespace": Object {},
+            "x-attribsPrefix": Object {},
+          },
+        ],
+        "name": "div",
+        "namespace": "http://www.w3.org/1999/xhtml",
+        "next": Object {
+          "attribs": Object {
+            "class": "user ",
+          },
+          "children": Array [
+            Object {
+              "attribs": Object {
+                "class": "avatar ",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "avatar-img",
+                    "src": "https://unix.bio/assets/avatar.png",
+                  },
+                  "children": Array [],
+                  "name": "img",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                    "src": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                    "src": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "avatar-img",
+                      "src": "https://unix.bio/assets/avatar.png",
+                    },
+                    "children": Array [],
+                    "name": "img",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                  },
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+              ],
+              "name": "span",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": Object {
+                "attribs": Object {
+                  "class": "names",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {
+                        "class": "social",
+                      },
+                      "children": Array [],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "name",
+                      },
+                      "children": Array [
+                        Object {
+                          "data": "witt",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                ],
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": [Circular],
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "parent": [Circular],
+              "prev": null,
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            Object {
+              "attribs": Object {
+                "class": "names",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+              ],
+              "name": "div",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+              "parent": [Circular],
+              "prev": Object {
+                "attribs": Object {
+                  "class": "avatar ",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "avatar-img",
+                      "src": "https://unix.bio/assets/avatar.png",
+                    },
+                    "children": Array [],
+                    "name": "img",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {},
+                      "children": Array [
+                        Object {
+                          "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "style",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "style",
+                      "x-attribsNamespace": Object {},
+                      "x-attribsPrefix": Object {},
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "avatar-img",
+                        "src": "https://unix.bio/assets/avatar.png",
+                      },
+                      "children": Array [],
+                      "name": "img",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                        "src": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                        "src": undefined,
+                      },
+                    },
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                ],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": Object {
+                "attribs": Object {
+                  "class": "names",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {
+                        "class": "social",
+                      },
+                      "children": Array [],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "name",
+                      },
+                      "children": Array [
+                        Object {
+                          "data": "witt",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                ],
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": Object {
+                  "attribs": Object {
+                    "class": "avatar ",
+                  },
+                  "children": Array [
+                    Object {
+                      "attribs": Object {
+                        "class": "avatar-img",
+                        "src": "https://unix.bio/assets/avatar.png",
+                      },
+                      "children": Array [],
+                      "name": "img",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": Object {
+                        "attribs": Object {},
+                        "children": Array [
+                          Object {
+                            "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "text",
+                          },
+                        ],
+                        "name": "style",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": [Circular],
+                        "type": "style",
+                        "x-attribsNamespace": Object {},
+                        "x-attribsPrefix": Object {},
+                      },
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                        "src": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                        "src": undefined,
+                      },
+                    },
+                    Object {
+                      "attribs": Object {},
+                      "children": Array [
+                        Object {
+                          "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "style",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": Object {
+                        "attribs": Object {
+                          "class": "avatar-img",
+                          "src": "https://unix.bio/assets/avatar.png",
+                        },
+                        "children": Array [],
+                        "name": "img",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": [Circular],
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "class": undefined,
+                          "src": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "class": undefined,
+                          "src": undefined,
+                        },
+                      },
+                      "type": "style",
+                      "x-attribsNamespace": Object {},
+                      "x-attribsPrefix": Object {},
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": [Circular],
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+          ],
+          "name": "div",
+          "namespace": "http://www.w3.org/1999/xhtml",
+          "next": null,
+          "parent": [Circular],
+          "prev": [Circular],
+          "type": "tag",
+          "x-attribsNamespace": Object {
+            "class": undefined,
+          },
+          "x-attribsPrefix": Object {
+            "class": undefined,
+          },
+        },
+        "parent": [Circular],
+        "prev": null,
+        "type": "tag",
+        "x-attribsNamespace": Object {
+          "class": undefined,
+        },
+        "x-attribsPrefix": Object {
+          "class": undefined,
+        },
+      },
+      Object {
+        "attribs": Object {
+          "class": "user ",
+        },
+        "children": Array [
+          Object {
+            "attribs": Object {
+              "class": "avatar ",
+            },
+            "children": Array [
+              Object {
+                "attribs": Object {
+                  "class": "avatar-img",
+                  "src": "https://unix.bio/assets/avatar.png",
+                },
+                "children": Array [],
+                "name": "img",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": [Circular],
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                  "src": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                  "src": undefined,
+                },
+              },
+              Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": Object {
+                  "attribs": Object {
+                    "class": "avatar-img",
+                    "src": "https://unix.bio/assets/avatar.png",
+                  },
+                  "children": Array [],
+                  "name": "img",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": [Circular],
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                    "src": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                    "src": undefined,
+                  },
+                },
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+            ],
+            "name": "span",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": Object {
+              "attribs": Object {
+                "class": "names",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+              ],
+              "name": "div",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+              "parent": [Circular],
+              "prev": [Circular],
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            "parent": [Circular],
+            "prev": null,
+            "type": "tag",
+            "x-attribsNamespace": Object {
+              "class": undefined,
+            },
+            "x-attribsPrefix": Object {
+              "class": undefined,
+            },
+          },
+          Object {
+            "attribs": Object {
+              "class": "names",
+            },
+            "children": Array [
+              Object {
+                "attribs": Object {
+                  "class": "name",
+                },
+                "children": Array [
+                  Object {
+                    "data": "witt",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": [Circular],
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              Object {
+                "attribs": Object {
+                  "class": "social",
+                },
+                "children": Array [],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": [Circular],
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+            ],
+            "name": "div",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": [Circular],
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+            "parent": [Circular],
+            "prev": Object {
+              "attribs": Object {
+                "class": "avatar ",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "avatar-img",
+                    "src": "https://unix.bio/assets/avatar.png",
+                  },
+                  "children": Array [],
+                  "name": "img",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                    "src": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                    "src": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "avatar-img",
+                      "src": "https://unix.bio/assets/avatar.png",
+                    },
+                    "children": Array [],
+                    "name": "img",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                  },
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+              ],
+              "name": "span",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": [Circular],
+              "parent": [Circular],
+              "prev": null,
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            "type": "tag",
+            "x-attribsNamespace": Object {
+              "class": undefined,
+            },
+            "x-attribsPrefix": Object {
+              "class": undefined,
+            },
+          },
+          Object {
+            "attribs": Object {},
+            "children": Array [
+              Object {
+                "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                "next": null,
+                "parent": [Circular],
+                "prev": null,
+                "type": "text",
+              },
+            ],
+            "name": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": null,
+            "parent": [Circular],
+            "prev": Object {
+              "attribs": Object {
+                "class": "names",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+              ],
+              "name": "div",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": [Circular],
+              "parent": [Circular],
+              "prev": Object {
+                "attribs": Object {
+                  "class": "avatar ",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "avatar-img",
+                      "src": "https://unix.bio/assets/avatar.png",
+                    },
+                    "children": Array [],
+                    "name": "img",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {},
+                      "children": Array [
+                        Object {
+                          "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "style",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "style",
+                      "x-attribsNamespace": Object {},
+                      "x-attribsPrefix": Object {},
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                      "src": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "avatar-img",
+                        "src": "https://unix.bio/assets/avatar.png",
+                      },
+                      "children": Array [],
+                      "name": "img",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                        "src": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                        "src": undefined,
+                      },
+                    },
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                ],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            "type": "style",
+            "x-attribsNamespace": Object {},
+            "x-attribsPrefix": Object {},
+          },
+        ],
+        "name": "div",
+        "namespace": "http://www.w3.org/1999/xhtml",
+        "next": null,
+        "parent": [Circular],
+        "prev": Object {
+          "attribs": Object {
+            "class": "user ",
+          },
+          "children": Array [
+            Object {
+              "attribs": Object {
+                "class": "avatar ",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "avatar-text",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "avatar-text",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+              ],
+              "name": "span",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": Object {
+                "attribs": Object {
+                  "class": "names",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {
+                        "class": "social",
+                      },
+                      "children": Array [],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "name",
+                      },
+                      "children": Array [
+                        Object {
+                          "data": "witt",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                ],
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": Object {
+                  "attribs": Object {},
+                  "children": Array [
+                    Object {
+                      "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "style",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": [Circular],
+                  "type": "style",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "parent": [Circular],
+              "prev": null,
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            Object {
+              "attribs": Object {
+                "class": "names",
+              },
+              "children": Array [
+                Object {
+                  "attribs": Object {
+                    "class": "name",
+                  },
+                  "children": Array [
+                    Object {
+                      "data": "witt",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "text",
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": [Circular],
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                Object {
+                  "attribs": Object {
+                    "class": "social",
+                  },
+                  "children": Array [],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": [Circular],
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+              ],
+              "name": "div",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+              "parent": [Circular],
+              "prev": Object {
+                "attribs": Object {
+                  "class": "avatar ",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "avatar-text",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {},
+                      "children": Array [
+                        Object {
+                          "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "style",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "style",
+                      "x-attribsNamespace": Object {},
+                      "x-attribsPrefix": Object {},
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {},
+                    "children": Array [
+                      Object {
+                        "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "style",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "avatar-text",
+                      },
+                      "children": Array [
+                        Object {
+                          "data": "witt",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "type": "style",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                ],
+                "name": "span",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "type": "tag",
+              "x-attribsNamespace": Object {
+                "class": undefined,
+              },
+              "x-attribsPrefix": Object {
+                "class": undefined,
+              },
+            },
+            Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .user {
+          display: inline-flex;
+          padding: 0 8pt;
+          justify-content: center;
+          align-items: center;
+          width: max-content;
+          max-width: 100%;
+        }
+        
+        .names {
+          margin-left: 8pt;
+          display: inline-flex;
+          flex-direction: column;
+          white-space: nowrap;
+        }
+        
+        .name {
+          font-size: .89rem;
+          color: #111;
+          line-height: 1.1rem;
+          text-transform: capitalize;
+          font-weight: 500;
+          max-width: 15rem;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        
+        .social {
+          font-size: .75rem;
+          color: #444;
+        }
+        
+        .social :global(*:first-child) {
+          margin-top: 0;
+        }
+        
+        .social :global(*:last-child) {
+          margin-bottom: 0;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": Object {
+                "attribs": Object {
+                  "class": "names",
+                },
+                "children": Array [
+                  Object {
+                    "attribs": Object {
+                      "class": "name",
+                    },
+                    "children": Array [
+                      Object {
+                        "data": "witt",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "text",
+                      },
+                    ],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": Object {
+                      "attribs": Object {
+                        "class": "social",
+                      },
+                      "children": Array [],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": [Circular],
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                  Object {
+                    "attribs": Object {
+                      "class": "social",
+                    },
+                    "children": Array [],
+                    "name": "span",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": Object {
+                      "attribs": Object {
+                        "class": "name",
+                      },
+                      "children": Array [
+                        Object {
+                          "data": "witt",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": [Circular],
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "class": undefined,
+                    },
+                  },
+                ],
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": Object {
+                  "attribs": Object {
+                    "class": "avatar ",
+                  },
+                  "children": Array [
+                    Object {
+                      "attribs": Object {
+                        "class": "avatar-text",
+                      },
+                      "children": Array [
+                        Object {
+                          "data": "witt",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "span",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": Object {
+                        "attribs": Object {},
+                        "children": Array [
+                          Object {
+                            "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "text",
+                          },
+                        ],
+                        "name": "style",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": [Circular],
+                        "type": "style",
+                        "x-attribsNamespace": Object {},
+                        "x-attribsPrefix": Object {},
+                      },
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "class": undefined,
+                      },
+                    },
+                    Object {
+                      "attribs": Object {},
+                      "children": Array [
+                        Object {
+                          "data": "
+        .avatar {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid #eaeaea;
+          border-radius: 50%;
+          vertical-align: top;
+          background-color: #fff;
+          margin: 0 0 0 0;
+        }
+        
+        .avatar:first-child {
+          margin: 0;
+        }
+        
+        .avatar-img {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+        
+        .avatar-text {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          font-size: 1em;
+          text-align: center;
+          transform: translate(-50%, -50%) scale(.65);
+          white-space: nowrap;
+          user-select: none;
+        }
+      ",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "text",
+                        },
+                      ],
+                      "name": "style",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": Object {
+                        "attribs": Object {
+                          "class": "avatar-text",
+                        },
+                        "children": Array [
+                          Object {
+                            "data": "witt",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "text",
+                          },
+                        ],
+                        "name": "span",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": [Circular],
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "class": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "class": undefined,
+                        },
+                      },
+                      "type": "style",
+                      "x-attribsNamespace": Object {},
+                      "x-attribsPrefix": Object {},
+                    },
+                  ],
+                  "name": "span",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": [Circular],
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {
+                    "class": undefined,
+                  },
+                  "x-attribsPrefix": Object {
+                    "class": undefined,
+                  },
+                },
+                "type": "tag",
+                "x-attribsNamespace": Object {
+                  "class": undefined,
+                },
+                "x-attribsPrefix": Object {
+                  "class": undefined,
+                },
+              },
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+          ],
+          "name": "div",
+          "namespace": "http://www.w3.org/1999/xhtml",
+          "next": [Circular],
+          "parent": [Circular],
+          "prev": null,
+          "type": "tag",
+          "x-attribsNamespace": Object {
+            "class": undefined,
+          },
+          "x-attribsPrefix": Object {
+            "class": undefined,
+          },
+        },
+        "type": "tag",
+        "x-attribsNamespace": Object {
+          "class": undefined,
+        },
+        "x-attribsPrefix": Object {
+          "class": undefined,
+        },
+      },
+    ],
+    "name": "div",
+    "namespace": "http://www.w3.org/1999/xhtml",
+    "next": null,
+    "parent": null,
+    "prev": null,
+    "root": Object {
+      "attribs": Object {},
+      "children": Array [
+        [Circular],
+      ],
+      "name": "root",
+      "namespace": "http://www.w3.org/1999/xhtml",
+      "next": null,
+      "parent": null,
+      "prev": null,
+      "type": "root",
+      "x-attribsNamespace": Object {},
+      "x-attribsPrefix": Object {},
+    },
+    "type": "tag",
+    "x-attribsNamespace": Object {},
+    "x-attribsPrefix": Object {},
+  },
+  "_root": [Circular],
+  "length": 1,
+  "options": Object {
+    "decodeEntities": true,
+    "normalizeWhitespace": false,
+    "withDomLvl1": true,
+    "xml": false,
+  },
+}
+`;
diff --git a/components/user/__tests__/index.test.tsx b/components/user/__tests__/index.test.tsx
new file mode 100644
index 0000000..2533dca
--- /dev/null
+++ b/components/user/__tests__/index.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { mount, render } from 'enzyme'
+import { User } from '../../index'
+
+describe(' User', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(<User name="witt" />)
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should support image and text', () => {
+    const wrapper = render(
+      <div>
+        <User name="witt" text="witt" />
+        <User name="witt" src="https://unix.bio/assets/avatar.png" />
+      </div>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  
+  it('should render description correctly', () => {
+    const wrapper = mount(<User name="witt">description</User>)
+    expect(wrapper.text().toLowerCase()).toContain('description')
+  })
+  
+  it('should render link on user.link', () => {
+    const wrapper = mount(
+      <User name="witt">
+        <User.Link href="https://twitter.com/echo_witt">twitter</User.Link>
+      </User>
+    )
+    const link = wrapper.find('a')
+    expect(link.length).not.toBe(0)
+  })
+})