Add empty state for channel (#41)

packages/react-chat/src/components/Channels.tsx

@@ -183,7 +183,7 @@ const ChannelWrapper = styled.div<ThemeProps>`
   }
 `;
 
-const ChannelInfo = styled.div`
+export const ChannelInfo = styled.div`
   display: flex;
   align-items: center;
 `;
@@ -193,7 +193,7 @@ const ChannelTextInfo = styled.div`
   flex-direction: column;
 `;
 
-const ChannelLogo = styled.div<ThemeProps>`
+export const ChannelLogo = styled.div<ThemeProps>`
   width: 24px;
   height: 24px;
   display: flex;
@@ -225,7 +225,7 @@ const ChannelLogo = styled.div<ThemeProps>`
   }
 `;
 
-const ChannelName = styled.p<ThemeProps>`
+export const ChannelName = styled.p<ThemeProps>`
   font-weight: 500;
   opacity: 0.7;
   color: ${({ theme }) => theme.primary};

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -8,6 +8,7 @@ import { ChatMessage } from "../../models/ChatMessage";
 import { Theme } from "../../styles/themes";
 import { Channel } from "../Channels";
 import { Community } from "../Community";
+import { EmptyChannel } from "../EmptyChannel";
 import { MembersIcon } from "../Icons/MembersIcon";
 import { NarrowChannels } from "../NarrowMode/NarrowChannels";
 import { NarrowTopbar } from "../NarrowMode/NarrowTopbar";
@@ -72,12 +73,14 @@ export function ChatBody({
           <MembersIcon theme={theme} />
         </MemberBtn>
       </ChatTopbar>
-      {!showChannelsList && !showMembersList && (
-        <>
+      {!showChannelsList &&
+        !showMembersList &&
+        (messages.length > 0 ? (
           <ChatMessages messages={messages} theme={theme} />
+        ) : (
+          <EmptyChannel theme={theme} channel={channel} />
+        ))}
       <ChatInput theme={theme} addMessage={sendMessage} />
-        </>
-      )}
       {showChannelsList && narrow && (
         <NarrowChannels
           theme={theme}

packages/react-chat/src/components/EmptyChannel.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import styled from "styled-components";
+
+import { ChannelData } from "../helpers/channelsMock";
+import { Theme } from "../styles/themes";
+
+import { ChannelInfo, ChannelLogo, ChannelName } from "./Channels";
+import { textMediumStyles } from "./Text";
+
+type EmptyChannelProps = {
+  theme: Theme;
+  channel: ChannelData;
+};
+
+export function EmptyChannel({ theme, channel }: EmptyChannelProps) {
+  return (
+    <Wrapper>
+      <ChannelInfoEmpty>
+        <ChannelLogoEmpty
+          style={{
+            backgroundImage: channel.icon ? `url(${channel.icon}` : "",
+          }}
+          theme={theme}
+        >
+          {" "}
+          {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
+        </ChannelLogoEmpty>
+        <ChannelNameEmpty theme={theme} className={"active"}>
+          {channel.name}
+        </ChannelNameEmpty>
+      </ChannelInfoEmpty>
+      <EmptyText theme={theme}>
+        Welcome to the beginning of the <span>#{channel.name}</span> channel!
+      </EmptyText>
+    </Wrapper>
+  );
+}
+
+interface ThemeProps {
+  theme: Theme;
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: calc(100% - 44px);
+  padding: 8px 16px 0;
+`;
+
+const ChannelInfoEmpty = styled(ChannelInfo)`
+  flex-direction: column;
+`;
+
+const ChannelLogoEmpty = styled(ChannelLogo)`
+  width: 120px;
+  height: 120px;
+  font-weight: bold;
+  font-size: 51px;
+  line-height: 62px;
+  margin-bottom: 16px;
+`;
+
+const ChannelNameEmpty = styled(ChannelName)`
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 30px;
+  margin-bottom: 16px;
+`;
+
+const EmptyText = styled.p<ThemeProps>`
+  display: inline-block;
+  color: ${({ theme }) => theme.secondary};
+
+  & > span {
+    color: ${({ theme }) => theme.primary};
+  }
+
+  ${textMediumStyles}
+`;