add sidebar members component

packages/components/src/sidebar-members/index.tsx

@@ -0,0 +1 @@
+export { SidebarMembers } from './sidebar-members'

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

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 }