refactor(react): sidebar components structure
This commit is contained in:
parent
4979a5cd96
commit
aadaa8d013
File diff suppressed because one or more lines are too long
|
@ -3,9 +3,9 @@ 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 { SidebarItem } from '../sidebar-item'
|
||||
|
||||
import type { SidebarItemProps } from './sidebar-item'
|
||||
import type { SidebarItemProps } from '../sidebar-item'
|
||||
|
||||
interface Props extends SidebarItemProps {
|
||||
children: string
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react'
|
||||
|
||||
import { Box } from '~/src/system'
|
||||
|
||||
import { ChannelGroup } from './channel-group'
|
||||
import { ChannelItem } from './channel-item'
|
||||
|
||||
const CHANNELS = {
|
||||
Public: ['welcome', 'general', 'random'],
|
||||
Other: ['random', 'general', 'welcome'],
|
||||
}
|
||||
|
||||
export const Channels = () => {
|
||||
return (
|
||||
<Box>
|
||||
{Object.entries(CHANNELS).map(([group, channels]) => (
|
||||
<ChannelGroup key={group} name={group}>
|
||||
{channels.map(channel => (
|
||||
<ChannelItem
|
||||
key={group + channel}
|
||||
to={`/${channel}`}
|
||||
unread={channel === 'general'}
|
||||
muted={channel === 'random'}
|
||||
>
|
||||
{channel}
|
||||
</ChannelItem>
|
||||
))}
|
||||
</ChannelGroup>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react'
|
||||
|
||||
import { useCommunity } from '~/src/protocol/use-community'
|
||||
import { styled } from '~/src/styles/config'
|
||||
import { Avatar } from '~/src/system/avatar'
|
||||
import { DialogTrigger } from '~/src/system/dialog'
|
||||
import { Text } from '~/src/system/text'
|
||||
|
||||
import { CommunityDialog } from './community-dialog'
|
||||
|
||||
export const CommunityInfo = () => {
|
||||
const { name, imageUrl, membersCount } = useCommunity()
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<Button>
|
||||
<Avatar size={36} src={imageUrl} />
|
||||
<div>
|
||||
<Text>{name}</Text>
|
||||
<Text color="gray" size={12}>
|
||||
{membersCount} members
|
||||
</Text>
|
||||
</div>
|
||||
</Button>
|
||||
<CommunityDialog />
|
||||
</DialogTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
const Button = styled('button', {
|
||||
padding: '4px 6px',
|
||||
display: 'inline-flex',
|
||||
alignSelf: 'flex-start',
|
||||
gap: '$2',
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
|
||||
'&:hover': {
|
||||
background: '#E9EDF1',
|
||||
},
|
||||
})
|
|
@ -3,9 +3,9 @@ import React from 'react'
|
|||
import { BellIcon } from '~/src/icons/bell-icon'
|
||||
import { ContextMenu, ContextMenuTrigger } from '~/src/system'
|
||||
|
||||
import { SidebarItem } from './sidebar-item'
|
||||
import { SidebarItem } from '../sidebar-item'
|
||||
|
||||
import type { SidebarItemProps } from './sidebar-item'
|
||||
import type { SidebarItemProps } from '../sidebar-item'
|
||||
|
||||
interface Props extends SidebarItemProps {
|
||||
children: string
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react'
|
||||
|
||||
import { EditIcon } from '~/src/icons/edit-icon'
|
||||
import { Box } from '~/src/system'
|
||||
import { Grid } from '~/src/system/grid'
|
||||
import { Heading } from '~/src/system/heading'
|
||||
import { IconButton } from '~/src/system/icon-button'
|
||||
|
||||
import { ChatItem } from './chat-item'
|
||||
|
||||
const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change']
|
||||
|
||||
export const Messages = () => {
|
||||
return (
|
||||
<Box>
|
||||
<Grid
|
||||
flow="column"
|
||||
align="center"
|
||||
justify="between"
|
||||
css={{ marginBottom: 16 }}
|
||||
>
|
||||
<Heading weight="600">Messages</Heading>
|
||||
<IconButton label="New Chat" to="/new">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
{CHATS.map(chat => (
|
||||
<ChatItem key={chat} to={`/${chat}`} unread={false} muted={false}>
|
||||
{chat}
|
||||
</ChatItem>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
|
@ -1,81 +1,21 @@
|
|||
import React from 'react'
|
||||
|
||||
import { EditIcon } from '~/src/icons/edit-icon'
|
||||
import { styled } from '~/src/styles/config'
|
||||
import { Box } from '~/src/system'
|
||||
import { Avatar } from '~/src/system/avatar'
|
||||
import { 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 { ChannelGroup } from './channel-group'
|
||||
import { ChannelItem } from './channel-item'
|
||||
import { ChatItem } from './chat-item'
|
||||
import { CommunityDialog } from './community-dialog'
|
||||
|
||||
const CHANNELS = {
|
||||
Public: ['welcome', 'general', 'random'],
|
||||
Other: ['random', 'general', 'welcome'],
|
||||
}
|
||||
|
||||
const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change']
|
||||
import { Channels } from './components/channels'
|
||||
import { CommunityInfo } from './components/community-info'
|
||||
import { GetStarted } from './components/get-started'
|
||||
import { Messages } from './components/messages'
|
||||
|
||||
export const MainSidebar = () => {
|
||||
return (
|
||||
<Wrapper>
|
||||
<DialogTrigger>
|
||||
<IdentityWrapper>
|
||||
<Avatar size={36} />
|
||||
<div>
|
||||
<Text>CryptoKitties</Text>
|
||||
<Text color="gray" size={12}>
|
||||
186 members
|
||||
</Text>
|
||||
</div>
|
||||
</IdentityWrapper>
|
||||
<CommunityDialog
|
||||
title="Crypto Kitties"
|
||||
description="A community of cat lovers, meow!"
|
||||
/>
|
||||
</DialogTrigger>
|
||||
|
||||
{Object.entries(CHANNELS).map(([group, channels]) => (
|
||||
<ChannelGroup key={group} name={group}>
|
||||
{channels.map(channel => (
|
||||
<ChannelItem
|
||||
key={group + channel}
|
||||
to={`/${channel}`}
|
||||
unread={channel === 'general'}
|
||||
muted={channel === 'random'}
|
||||
>
|
||||
{channel}
|
||||
</ChannelItem>
|
||||
))}
|
||||
</ChannelGroup>
|
||||
))}
|
||||
|
||||
<CommunityInfo />
|
||||
<Channels />
|
||||
<Separator />
|
||||
|
||||
<Box>
|
||||
<Grid
|
||||
flow="column"
|
||||
align="center"
|
||||
justify="between"
|
||||
css={{ marginBottom: 16 }}
|
||||
>
|
||||
<Heading weight="600">Messages</Heading>
|
||||
<IconButton label="New Chat" to="/new">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
{CHATS.map(chat => (
|
||||
<ChatItem key={chat} to={`/${chat}`} unread={false} muted={false}>
|
||||
{chat}
|
||||
</ChatItem>
|
||||
))}
|
||||
</Box>
|
||||
<Messages />
|
||||
<Separator />
|
||||
<GetStarted />
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
@ -99,16 +39,3 @@ const Separator = styled('div', {
|
|||
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',
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue