add user list component

This commit is contained in:
Pavel Prichodko 2023-01-19 23:57:06 +01:00
parent d793e9a5b8
commit 8f9491169a
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
3 changed files with 86 additions and 0 deletions

View File

@ -0,0 +1 @@
export * from './user-list'

View File

@ -0,0 +1,33 @@
import { UserList } from './user-list'
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 UserList> = {
component: UserList,
argTypes: {},
parameters: {
design: {
type: 'figma',
url: '',
},
},
}
type Story = StoryObj<typeof UserList>
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
export const Default: Story = {
args: {
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',
},
],
},
}
export default meta

View File

@ -0,0 +1,52 @@
import { XStack, YStack } from 'tamagui'
import { Author } from '../author/author'
import { Avatar } from '../avatar'
import { Paragraph } from '../typography'
import type { AuthorProps } from '../author/author'
import type { AvatarProps } from '../avatar'
type Props = {
users: (Pick<AvatarProps, 'src' | 'indicator'> & AuthorProps)[]
}
const UserList = (props: Props) => {
const { users } = props
return (
<YStack>
{users.map(user => {
return (
<XStack
key={user.address}
padding={8}
space={8}
borderRadius={12}
alignItems="center"
cursor="pointer"
hoverStyle={{
backgroundColor: '$primary-50-opa-5',
}}
>
<Avatar size={32} src={user.src} indicator={user.indicator} />
<YStack>
<Author
name={user.name}
nickname={user.nickname}
status={user.status}
orientation="vertical"
/>
<Paragraph variant="smaller" color="$neutral-50">
{user.address}
</Paragraph>
</YStack>
</XStack>
)
})}
</YStack>
)
}
export { UserList }
export type { Props as USerListProps }