From 4bd81cd0fc64ff416e98c000e69bd4cff9d31e14 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Thu, 19 Jan 2023 23:57:06 +0100
Subject: [PATCH] add user list component

---
 packages/components/src/user-list/index.tsx   |  1 +
 .../src/user-list/user-list.stories.tsx       | 33 ++++++++++++
 .../components/src/user-list/user-list.tsx    | 52 +++++++++++++++++++
 3 files changed, 86 insertions(+)
 create mode 100644 packages/components/src/user-list/index.tsx
 create mode 100644 packages/components/src/user-list/user-list.stories.tsx
 create mode 100644 packages/components/src/user-list/user-list.tsx

diff --git a/packages/components/src/user-list/index.tsx b/packages/components/src/user-list/index.tsx
new file mode 100644
index 00000000..bc112ea4
--- /dev/null
+++ b/packages/components/src/user-list/index.tsx
@@ -0,0 +1 @@
+export * from './user-list'
diff --git a/packages/components/src/user-list/user-list.stories.tsx b/packages/components/src/user-list/user-list.stories.tsx
new file mode 100644
index 00000000..d3c7366b
--- /dev/null
+++ b/packages/components/src/user-list/user-list.stories.tsx
@@ -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
diff --git a/packages/components/src/user-list/user-list.tsx b/packages/components/src/user-list/user-list.tsx
new file mode 100644
index 00000000..fec7d091
--- /dev/null
+++ b/packages/components/src/user-list/user-list.tsx
@@ -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 }