add sidebar members component
This commit is contained in:
Pavel Prichodko
parent
8f9491169a
commit
f821b0c89d
|
|
@ -0,0 +1 @@
|
||||||
|
export { SidebarMembers } from './sidebar-members'
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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 }
|
||||||
Loading…
Reference in New Issue