<script>
import Header from './Header.svelte'
import Frame from './Frame.svelte'
import Timeline from './Timeline.svelte'
import PropertyEditor from './PropertyEditor.svelte'
import FrameEditor from './FrameEditor.svelte'
import { Screen } from 'svelte-preview-ui'
</script>
<div class="container">
<Header/>
<div class="main">
<Frame>
<Screen class="terminal" title="terminal"/>
</Frame>
<PropertyEditor title="Frame">
<FrameEditor/>
</PropertyEditor>
</div>
<Timeline/>
</div>
<style>
:global(:root) {
--white-color: white;
--accent-color: #f71df7;
--gray-color-2: #5a5a5a;
--gray-color-1: #898989;
--gray-color-0: #c4c4c4;
--background-color: #e5e5e5;
}
:global(body) {
font-family: Inter;
background: var(--background-color);