From f821b0c89d80ab007e2144d5814725bb973a6cc8 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Thu, 19 Jan 2023 23:58:08 +0100
Subject: [PATCH] add sidebar members component

---
 .../components/src/sidebar-members/index.tsx  |   1 +
 .../sidebar-member.stories.tsx                |  19 +++
 .../src/sidebar-members/sidebar-members.tsx   | 132 ++++++++++++++++++
 3 files changed, 152 insertions(+)
 create mode 100644 packages/components/src/sidebar-members/index.tsx
 create mode 100644 packages/components/src/sidebar-members/sidebar-member.stories.tsx
 create mode 100644 packages/components/src/sidebar-members/sidebar-members.tsx

diff --git a/packages/components/src/sidebar-members/index.tsx b/packages/components/src/sidebar-members/index.tsx
new file mode 100644
index 00000000..26183488
--- /dev/null
+++ b/packages/components/src/sidebar-members/index.tsx
@@ -0,0 +1 @@
+export { SidebarMembers } from './sidebar-members'
diff --git a/packages/components/src/sidebar-members/sidebar-member.stories.tsx b/packages/components/src/sidebar-members/sidebar-member.stories.tsx
new file mode 100644
index 00000000..cf8e8314
--- /dev/null
+++ b/packages/components/src/sidebar-members/sidebar-member.stories.tsx
@@ -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
diff --git a/packages/components/src/sidebar-members/sidebar-members.tsx b/packages/components/src/sidebar-members/sidebar-members.tsx
new file mode 100644
index 00000000..59649157
--- /dev/null
+++ b/packages/components/src/sidebar-members/sidebar-members.tsx
@@ -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 }