add sidebar members component

This commit is contained in:
Pavel Prichodko 2023-01-19 23:58:08 +01:00
parent 4bd81cd0fc
commit bb3506580f
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
3 changed files with 152 additions and 0 deletions

View File

@ -0,0 +1 @@
export { SidebarMembers } from './sidebar-members'

View File

@ -0,0 +1,19 @@
import { SidebarMembers } from './sidebar-members'
import type { Meta, StoryObj } from '@storybook/react'
// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
const meta: Meta<typeof SidebarMembers> = {
title: 'Sidebar/Members',
component: SidebarMembers,
argTypes: {},
}
type Story = StoryObj<typeof SidebarMembers>
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
export const Default: Story = {
args: {},
}
export default meta

View File

@ -0,0 +1,132 @@
import { Stack } from '@tamagui/core'
import { DividerLabel } from '../divider-label'
import { UserList } from '../user-list'
import type { USerListProps } from '../user-list'
type GroupProps = {
label: string
users: USerListProps['users']
}
const Group = (props: GroupProps) => {
const { label, users } = props
return (
<Stack paddingBottom={8}>
<DividerLabel label={label} tight={false} />
<Stack paddingHorizontal={8}>
<UserList users={users} />
</Stack>
</Stack>
)
}
const SidebarMembers = () => {
return (
<Stack
backgroundColor="$background"
borderLeftWidth={1}
borderColor="$neutral-10"
overflow="scroll"
height="100%"
>
<Group
label="Admin"
users={[
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
},
]}
/>
<Group
label="Online"
users={[
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
},
]}
/>
<Group
label="Offline"
users={[
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
},
]}
/>
</Stack>
)
}
export { SidebarMembers }