From f975ce304ae42d09c8b1fe4f7933adaa16b28543 Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@proton.me>
Date: Wed, 17 May 2023 10:09:47 -0400
Subject: [PATCH] feat: ChatHeader

---
 src/components/Chat.tsx       | 20 +++++++++++--
 src/components/ChatHeader.tsx | 56 +++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ChatHeader.tsx

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 388caec..2490452 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -1,10 +1,12 @@
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { useAppStore } from "../stores/AppStore";
+import ChatHeader from "./ChatHeader";
 import Container from "./Container";
 
 const Wrapper = styled(Container)`
 	display: flex;
+	flex-direction: column;
 	flex: 1 1 100%;
 	background-color: var(--background-primary);
 `;
@@ -16,8 +18,22 @@ function Chat() {
 		channelId: string;
 	}>();
 	const guild = app.guilds.get(guildId!);
-	if (!guild) return <Wrapper>Invalid Guild ID</Wrapper>;
-	return <Wrapper>Chat</Wrapper>;
+	const channel = guild?.channels.get(channelId!);
+
+	if (!guild)
+		return (
+			<Wrapper>
+				<ChatHeader channel={channel} />
+				<span>Unknown Guild</span>
+			</Wrapper>
+		);
+
+	return (
+		<Wrapper>
+			<ChatHeader channel={channel} />
+			<span>Chat</span>
+		</Wrapper>
+	);
 }
 
 export default Chat;
diff --git a/src/components/ChatHeader.tsx b/src/components/ChatHeader.tsx
new file mode 100644
index 0000000..2bc2381
--- /dev/null
+++ b/src/components/ChatHeader.tsx
@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import Channel from "../stores/objects/Channel";
+
+const Wrapper = styled.section`
+	display: flex;
+	padding: 12px 16px;
+	margin-bottom: 1px;
+	background-color: var(--background-primary);
+	box-shadow: 0 1px 0 hsl(0deg 0% 0% / 0.3);
+	align-items: center;
+`;
+
+const InnerWrapper = styled.div`
+	display: flex;
+	flex: 1 1 auto;
+	align-items: center;
+`;
+
+const NameWrapper = styled.div`
+	font-size: 16px;
+`;
+
+const Divider = styled.div`
+	width: 1px;
+	height: 16px;
+	margin: 0 8px;
+	background-color: var(--text-secondary);
+`;
+
+const TopicWrapper = styled.div`
+	font-size: 14px;
+`;
+
+interface Props {
+	channel?: Channel;
+}
+
+// TODO: handle the chat header on home page
+function ChatHeader({ channel }: Props) {
+	if (!channel) return null;
+	return (
+		<Wrapper>
+			<InnerWrapper>
+				<NameWrapper>#{channel.name}</NameWrapper>
+				{channel.topic && (
+					<>
+						<Divider />
+						<TopicWrapper>{channel.topic}</TopicWrapper>
+					</>
+				)}
+			</InnerWrapper>
+		</Wrapper>
+	);
+}
+
+export default ChatHeader;