From c1fba5e633b709b6801f52c3b20264ee5f0860d4 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Wed, 16 Mar 2022 12:41:55 +0100 Subject: [PATCH] feat(react): add MainSidebar component --- .../components/main-sidebar/channel-group.tsx | 64 +++++++++ .../components/main-sidebar/channel-item.tsx | 37 ++++++ .../src/components/main-sidebar/chat-item.tsx | 37 ++++++ .../src/components/main-sidebar/index.tsx | 125 ++++++++++++++++++ .../components/main-sidebar/sidebar-item.tsx | 79 +++++++++++ 5 files changed, 342 insertions(+) create mode 100644 packages/status-react/src/components/main-sidebar/channel-group.tsx create mode 100644 packages/status-react/src/components/main-sidebar/channel-item.tsx create mode 100644 packages/status-react/src/components/main-sidebar/chat-item.tsx create mode 100644 packages/status-react/src/components/main-sidebar/index.tsx create mode 100644 packages/status-react/src/components/main-sidebar/sidebar-item.tsx diff --git a/packages/status-react/src/components/main-sidebar/channel-group.tsx b/packages/status-react/src/components/main-sidebar/channel-group.tsx new file mode 100644 index 00000000..1b860cfe --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/channel-group.tsx @@ -0,0 +1,64 @@ +import React from 'react' + +import * as Collapsible from '@radix-ui/react-collapsible' + +import { BellIcon } from '~/src/icons/bell-icon' +import { ChevronDownIcon } from '~/src/icons/chevron-down-icon' +import { styled } from '~/src/styles/config' +import { ContextMenu, ContextMenuTrigger } from '~/src/system/context-menu' +import { Text } from '~/src/system/text' + +interface Props { + name: string + children: React.ReactNode +} + +export const ChannelGroup = (props: Props) => { + const { name, children } = props + + return ( + + + + + {name} + + + + {children} + + + }> + For 15 min + For 1 hour + For 8 hours + For 24 hours + Until I turn it back on + + }>Mark as Read + + + ) +} + +const CollapsibleTrigger = styled(Collapsible.Trigger, { + width: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: 8, + borderRadius: 8, + height: 34, + + '&:hover': { + background: '#E9EDF1', + }, + + '&[aria-expanded="true"] svg': { + transform: 'rotate(180deg)', + }, +}) + +const CollapsibleContent = styled(Collapsible.Content, { + overflow: 'hidden', +}) diff --git a/packages/status-react/src/components/main-sidebar/channel-item.tsx b/packages/status-react/src/components/main-sidebar/channel-item.tsx new file mode 100644 index 00000000..cfed8b18 --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/channel-item.tsx @@ -0,0 +1,37 @@ +import React from 'react' + +import { BellIcon } from '~/src/icons/bell-icon' +import { ContextMenu, ContextMenuTrigger } from '~/src/system/context-menu' + +import { SidebarItem } from './sidebar-item' + +import type { SidebarItemProps } from './sidebar-item' + +interface Props extends SidebarItemProps { + children: string +} + +export const ChannelItem = (props: Props) => { + const { children, ...sidebarItemProps } = props + + return ( + + #{children} + + }>View Profile + + + For 15 min + For 1 hour + For 8 hours + For 24 hours + Until I turn it back on + + + } danger> + Delete + + + + ) +} diff --git a/packages/status-react/src/components/main-sidebar/chat-item.tsx b/packages/status-react/src/components/main-sidebar/chat-item.tsx new file mode 100644 index 00000000..be7e7fa8 --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/chat-item.tsx @@ -0,0 +1,37 @@ +import React from 'react' + +import { BellIcon } from '~/src/icons/bell-icon' +import { ContextMenu, ContextMenuTrigger } from '~/src/system' + +import { SidebarItem } from './sidebar-item' + +import type { SidebarItemProps } from './sidebar-item' + +interface Props extends SidebarItemProps { + children: string +} + +export const ChatItem = (props: Props) => { + const { children, ...sidebarItemProps } = props + + return ( + + {children} + + }>View Profile + + }> + For 15 min + For 1 hour + For 8 hours + For 24 hours + Until I turn it back on + + + } danger> + Delete + + + + ) +} diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx new file mode 100644 index 00000000..e30f154c --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/index.tsx @@ -0,0 +1,125 @@ +import React from 'react' + +import { useAppState } from '~/src/contexts/app-context' +import { EditIcon } from '~/src/icons/edit-icon' +import { styled } from '~/src/styles/config' +import { Box, Button } from '~/src/system' +import { Avatar } from '~/src/system/avatar' +import { Dialog, DialogTrigger } from '~/src/system/dialog' +import { Grid } from '~/src/system/grid' +import { Heading } from '~/src/system/heading' +import { IconButton } from '~/src/system/icon-button' +import { Text } from '~/src/system/text' +import { TextInput } from '~/src/system/text-input' + +import { ChannelGroup } from './channel-group' +import { ChannelItem } from './channel-item' +import { ChatItem } from './chat-item' + +const CHANNELS = { + Public: ['welcome', 'general', 'random'], + Other: ['random', 'general', 'welcome'], +} + +const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change'] + +export const MainSidebar = () => { + const { dispatch } = useAppState() + + return ( + + + + +
+ CryptoKitties + + 186 members + +
+ + + A community of cat lovers, meow! + + + To access this community, paste community public key in Status + desktop or mobile app + + + + + + {Object.entries(CHANNELS).map(([group, channels]) => ( + + {channels.map(channel => ( + + {channel} + + ))} + + ))} + + + + + + Messages + dispatch({ type: 'NEW_CHAT' })} + > + + + + {CHATS.map(chat => ( + + {chat} + + ))} + + + ) +} + +const Wrapper = styled('div', { + width: 304, + flexShrink: 0, + flexDirection: 'column', + padding: '10px 16px', + display: 'none', + backgroundColor: '#F6F8FA', + overflowY: 'scroll', + + '@medium': { + display: 'flex', + }, +}) + +const Separator = styled('div', { + margin: '16px 0', + height: 1, + background: 'rgba(0, 0, 0, 0.1)', +}) + +const IdentityWrapper = styled('button', { + padding: '4px 6px', + display: 'inline-flex', + alignSelf: 'flex-start', + gap: '$2', + borderRadius: 8, + alignItems: 'center', + + '&:hover': { + background: '#E9EDF1', + }, +}) diff --git a/packages/status-react/src/components/main-sidebar/sidebar-item.tsx b/packages/status-react/src/components/main-sidebar/sidebar-item.tsx new file mode 100644 index 00000000..1196dfd2 --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/sidebar-item.tsx @@ -0,0 +1,79 @@ +import React, { forwardRef } from 'react' + +import { styled } from '~/src/styles/config' +import { Avatar } from '~/src/system' + +import type { Ref } from 'react' + +interface Props { + muted: boolean + unread: boolean + active: boolean + children: React.ReactNode +} + +const SidebarItem = (props: Props, ref: Ref) => { + const { muted, unread, active, children, ...buttonProps } = props + + return ( + + ) +} + +const _SidebarItem = forwardRef(SidebarItem) + +export { _SidebarItem as SidebarItem } +export type SidebarItemProps = Omit + +const Button = styled('button', { + position: 'relative', + fontFamily: '$sans', + fontWeight: '$500', + fontSize: 15, + display: 'inline-flex', + color: 'rgba(0, 0, 0, 0.7)', + alignItems: 'center', + width: '100%', + gap: '$2', + borderRadius: 8, + padding: 8, + + '&:hover': { + background: '#E9EDF1', + }, + + variants: { + active: { + true: { + background: 'rgba(233, 237, 241, 1)', + }, + }, + state: { + muted: { + color: 'rgba(0, 0, 0, 0.4)', + }, + unread: { + fontWeight: '$600', + '&::after': { + content: '"1"', + position: 'absolute', + right: 8, + width: 22, + height: 22, + background: '#4360DF', + borderRadius: '$full', + fontSize: 12, + color: '#fff', + }, + }, + }, + }, +})