Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-25 11:42:30 +01:00
Code Issues Releases Activity

refactor: main page section components

Browse Source
This commit is contained in:
Puyodead1 2023-04-28 15:03:08 -04:00
parent 14f9bdb78f
commit 6401fcf93a
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
5 changed files with 89 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ChannelList.tsx Normal file
View File

@ -0,0 +1,18 @@
import styled from "styled-components";
import Container from "./Container";
const Wrapper = styled(Container)`
display: flex;
flex: 0 0 240px;
background-color: var(--background-secondary);
@media (max-width: 1080px) {
display: none;
}
`;
function ChannelList() {
return <Wrapper>ChannelList</Wrapper>;
}
export default ChannelList;

14
src/components/Chat.tsx Normal file
View File

@ -0,0 +1,14 @@
import styled from "styled-components";
import Container from "./Container";
const Wrapper = styled(Container)`
display: flex;
flex: 1 1 100%;
background-color: var(--background-primary);
`;
function Chat() {
return <Wrapper>Chat</Wrapper>;
}
export default Chat;

7
src/components/GuildSidebar.tsx
View File

@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import styled from "styled-components";
import { useAppStore } from "../stores/AppStore";
import GuildItem from "./GuildItem";
@ -10,6 +11,10 @@ const List = styled.ul`
flex-direction: column;
flex: 0 0 48px;
align-items: center;
@media (max-width: 1080px) {
display: none;
}
`;
const ListItem = styled.li`
@ -31,4 +36,4 @@ function GuildSidebar() {
);
}
export default GuildSidebar;
export default observer(GuildSidebar);

18
src/components/MemberList.tsx Normal file
View File

@ -0,0 +1,18 @@
import styled from "styled-components";
import Container from "./Container";
const Wrapper = styled(Container)`
display: flex;
flex: 0 0 240px;
background-color: var(--background-secondary);
@media (max-width: 1080px) {
display: none;
}
`;
function MemberList() {
return <Wrapper>MemberList</Wrapper>;
}
export default MemberList;

33
src/pages/subpages/ChannelPage.tsx Normal file
View File

@ -0,0 +1,33 @@
import { observer } from "mobx-react-lite";
import styled from "styled-components";
import ChannelList from "../../components/ChannelList";
import Chat from "../../components/Chat";
import Container from "../../components/Container";
import GuildSidebar from "../../components/GuildSidebar";
import MemberList from "../../components/MemberList";
const Wrapper = styled(Container)`
display: flex;
flex-direction: row;
`;
function Test() {
return (
<>
<ChannelList />
<Chat />
<MemberList />
</>
);
}
function ChannelPage() {
return (
<Wrapper>
<GuildSidebar />
<Test />
</Wrapper>
);
}
export default observer(ChannelPage);