From 8127057f50a2e995bdbbaf6ab43f4b5251014ae2 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 13 Apr 2022 14:25:54 +0200
Subject: [PATCH] feat(react): create chat info component

---
 .../chat/components/chat-info/index.tsx       | 75 +++++++++++++++++++
 .../chat-info/pinned-messages-dialog.tsx      | 11 +++
 2 files changed, 86 insertions(+)
 create mode 100644 packages/status-react/src/routes/chat/components/chat-info/index.tsx
 create mode 100644 packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx

diff --git a/packages/status-react/src/routes/chat/components/chat-info/index.tsx b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
new file mode 100644
index 00000000..36457083
--- /dev/null
+++ b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { PinIcon } from '~/src/icons/pin-icon'
+import { Avatar, DialogTrigger, Flex, Text } from '~/src/system'
+
+import { PinnedMessagesDialog } from './pinned-messages-dialog'
+
+import type { Chat } from '~/src/protocol/use-chat'
+
+interface Props {
+  chat: Chat
+}
+
+export const ChatInfo = (props: Props) => {
+  const { chat } = props
+
+  if (chat.type == 'channel') {
+    return (
+      <Flex align="center" gap="2">
+        <Avatar size={36} src={chat.imageUrl} />
+        <div>
+          <Text>#general</Text>
+          <Flex align="center">
+            <Text size={12} color="gray">
+              <DialogTrigger>
+                <button
+                  style={{ display: 'inline-flex', alignItems: 'center' }}
+                >
+                  {/* <PinIcon width={7} height={13} />2 pinned messages */}2
+                  pinned messages
+                </button>
+                <PinnedMessagesDialog />
+              </DialogTrigger>{' '}
+              | General discussions about CryptoKitties.
+            </Text>
+          </Flex>
+        </div>
+      </Flex>
+    )
+  }
+
+  if (chat.type == 'group-chat') {
+    return (
+      <Flex align="center" gap="2">
+        <Avatar size={36} src={chat.imageUrl} />
+        <div>
+          <Text>Climate Change</Text>
+          <Flex align="center">
+            <DialogTrigger>
+              <Text as="button" size={12} color="gray">
+                <PinIcon width={7} /> 2 pinned messages
+              </Text>
+              <PinnedMessagesDialog />
+            </DialogTrigger>
+            <Text size={12} color="gray">
+              | 5 members
+            </Text>
+          </Flex>
+        </div>
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex align="center" gap="2">
+      <Avatar size={36} src={chat.imageUrl} />
+      <div>
+        <Text>pvl.eth</Text>
+        <Text size={12} color="gray">
+          0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377
+        </Text>
+      </div>
+    </Flex>
+  )
+}
diff --git a/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx b/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
new file mode 100644
index 00000000..198ef091
--- /dev/null
+++ b/packages/status-react/src/routes/chat/components/chat-info/pinned-messages-dialog.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { Dialog } from '~/src/system'
+
+export const PinnedMessagesDialog = () => {
+  return (
+    <Dialog title="Pinned Messages" size="1060">
+      <Dialog.Body>{/* TODO: Add pinned messages */}</Dialog.Body>
+    </Dialog>
+  )
+}