Something went wrong. Try again.
svelte astro
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<script lang="ts"> import Filters from "./Filters.svelte"; import Info from "./Info.svelte"; import Header from "./Header.svelte"; import Nav from "./Nav.svelte"; import Table from "./Table.svelte"; import TwoPlot from "./TwoPlot.svelte"; import ThreePlot from "./ThreePlot.svelte"; import { proyectState } from "../State.svelte"; import Paints from "./Paints.svelte";
const TAB_COMPONENTS = { table: Table, twoplot: TwoPlot, threeplot: ThreePlot, };
// App only renders Workspace once proyectState.current is set, so this // is safe to assume non-null for as long as Workspace is mounted. let proyect = $derived(proyectState.current!);
const CurrentView = $derived(TAB_COMPONENTS[proyect.currentTab]);</script>
<main> <Header />
<div class="workspace"> <div class="view"> <CurrentView csv={proyect.filteredData} /> </div>
<div class="helpers"> <Nav /> <Filters /> <Paints /> <Info csv={proyect.filteredData} /> </div> </div></main>
<style> main { width: calc(100vw - 2 * var(--padding)); height: calc(100vh - 2 * var(--padding)); }
.workspace { padding-top: var(--padding); display: flex; flex-direction: row; gap: var(--padding); height: 94%; /* This height should depend on main */ width: 100%; }
.view { overflow: hidden; flex: 1; background-color: var(--surface); border: 3px solid var(--text); border-radius: 8px; }
.helpers { display: flex; flex-direction: column; gap: var(--padding); }
.helpers > :global(*:nth-child(3)) { flex: 1; } @media (max-width: 600px) { .workspace { flex-direction: column; } .helpers { flex-direction: row; } }</style>