waffle/frontend/src/components/ChannelView.svelte

26 lines
741 B
Svelte

<script>
import ChannelTopBar from "./ChannelTopBar.svelte";
import MessageInput from "./MessageInput.svelte";
import Messages from "./Messages.svelte";
import { quadInOut } from "svelte/easing";
import { maybeFly } from "../animations";
export let channel;
</script>
<style>
.main-container {
background-color: var(--background-color-1);
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
</style>
<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
<ChannelTopBar channel={ channel } />
<Messages channelId="{ channel.id }" />
<MessageInput channel={ channel } />
</div>