add user list component
This commit is contained in:
parent
d793e9a5b8
commit
8f9491169a
|
@ -0,0 +1 @@
|
|||
export * from './user-list'
|
|
@ -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
|
|
@ -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 }
|
Loading…
Reference in New Issue