From f9a99c39467db9ac4977beca5869460780787ca3 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Wed, 16 Mar 2022 12:42:30 +0100 Subject: [PATCH] feat(react): add MemberSidebar component --- .../src/components/member-sidebar/index.tsx | 60 +++++++++++++++ .../member-sidebar/member-group.tsx | 21 ++++++ .../components/member-sidebar/member-item.tsx | 70 ++++++++++++++++++ .../components/member-sidebar/user-item.tsx | 73 +++++++++++++++++++ 4 files changed, 224 insertions(+) create mode 100644 packages/status-react/src/components/member-sidebar/index.tsx create mode 100644 packages/status-react/src/components/member-sidebar/member-group.tsx create mode 100644 packages/status-react/src/components/member-sidebar/member-item.tsx create mode 100644 packages/status-react/src/components/member-sidebar/user-item.tsx diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx new file mode 100644 index 00000000..b287119c --- /dev/null +++ b/packages/status-react/src/components/member-sidebar/index.tsx @@ -0,0 +1,60 @@ +import React from 'react' + +import { styled } from '~/src/styles/config' +import { Grid } from '~/src/system' +import { Heading } from '~/src/system/heading' + +import { MemberGroup } from './member-group' +import { MemberItem } from './member-item' +import { UserItem } from './user-item' + +export function MemberSidebar() { + return ( + + + Members + + + + + + + + pvl.eth + + + carmen + + + carmen + + + + + mark + + + mark + + + + + ) +} + +const Wrapper = styled('div', { + width: 256, + flexShrink: 0, + padding: '18px 16px', + display: 'none', + backgroundColor: '#F6F8FA', + overflowY: 'scroll', + + '@medium': { + display: 'block', + }, +}) diff --git a/packages/status-react/src/components/member-sidebar/member-group.tsx b/packages/status-react/src/components/member-sidebar/member-group.tsx new file mode 100644 index 00000000..451b277d --- /dev/null +++ b/packages/status-react/src/components/member-sidebar/member-group.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +import { Text } from '~/src/system' + +interface Props { + label: string + children: React.ReactElement[] | React.ReactElement +} + +export const MemberGroup = (props: Props) => { + const { label, children } = props + + return ( +
+ + {label} + + {children} +
+ ) +} diff --git a/packages/status-react/src/components/member-sidebar/member-item.tsx b/packages/status-react/src/components/member-sidebar/member-item.tsx new file mode 100644 index 00000000..154fbf5a --- /dev/null +++ b/packages/status-react/src/components/member-sidebar/member-item.tsx @@ -0,0 +1,70 @@ +import React from 'react' + +import { Avatar, EthAddress, Flex, Text } from '~/src/system' + +import type { AvatarProps } from '~/src/system/avatar' + +interface Props { + children: string + verified: boolean + untrustworthy: boolean + indicator?: AvatarProps['indicator'] +} + +export const MemberItem = (props: Props) => { + const { children, indicator, verified, untrustworthy } = props + + return ( + + +
+ + + {children} + + {verified && ( + + + + + )} + {untrustworthy && ( + + + + + )} + + + 71C7656EC7ab88b098defB751B7401B5f6d8976F + +
+ + ) +} diff --git a/packages/status-react/src/components/member-sidebar/user-item.tsx b/packages/status-react/src/components/member-sidebar/user-item.tsx new file mode 100644 index 00000000..f506aad5 --- /dev/null +++ b/packages/status-react/src/components/member-sidebar/user-item.tsx @@ -0,0 +1,73 @@ +import React from 'react' + +import { styled } from '~/src/styles/config' +import { + Avatar, + Dialog, + DialogTrigger, + EthAddress, + Flex, + Text, +} from '~/src/system' + +export const UserItem = () => { + return ( + + + +
+ + + Pavel + + + + 71C7656EC7ab88b098defB751B7401B5f6d8976F + +
+ + + + + + + + + + + Do you want to disconnect your profile from this browser? + + + + + ) +} + +const LogoutButton = styled('button', { + background: 'rgba(67, 96, 223, 0.1)', + borderRadius: '50%', + height: 32, + width: 32, + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', +})