Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 18:32:34 +01:00
Code Issues Releases Activity

feat: ChatHeader

Browse Source
This commit is contained in:
Puyodead1 2023-05-17 10:09:47 -04:00
parent 947aad7130
commit f975ce304a
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
2 changed files with 74 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Chat.tsx
View File

@ -1,10 +1,12 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import styled from "styled-components"; import styled from "styled-components";
import { useAppStore } from "../stores/AppStore"; import { useAppStore } from "../stores/AppStore";
import ChatHeader from "./ChatHeader";
import Container from "./Container"; import Container from "./Container";
const Wrapper = styled(Container)` const Wrapper = styled(Container)`
display: flex; display: flex;
flex-direction: column;
flex: 1 1 100%; flex: 1 1 100%;
background-color: var(--background-primary); background-color: var(--background-primary);
`; `;
@ -16,8 +18,22 @@ function Chat() {
channelId: string; channelId: string;
}>(); }>();
const guild = app.guilds.get(guildId!); const guild = app.guilds.get(guildId!);
if (!guild) return <Wrapper>Invalid Guild ID</Wrapper>; const channel = guild?.channels.get(channelId!);
return <Wrapper>Chat</Wrapper>;
if (!guild)
return (
<Wrapper>
<ChatHeader channel={channel} />
<span>Unknown Guild</span>
</Wrapper>
);
return (
<Wrapper>
<ChatHeader channel={channel} />
<span>Chat</span>
</Wrapper>
);
} }
export default Chat; export default Chat;

56
src/components/ChatHeader.tsx Normal file
View File

@ -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;