30 lines
947 B
TypeScript
30 lines
947 B
TypeScript
import type { ImageStudioApp } from "@app/app";
|
||
import { CanvasViewport } from "./CanvasViewport";
|
||
import { useAppState } from "./useAppState";
|
||
import "./index.css";
|
||
|
||
export type AppProps = {
|
||
app: ImageStudioApp;
|
||
};
|
||
|
||
export function App({ app }: AppProps) {
|
||
const state = useAppState(app.store);
|
||
const zoomPercent = Math.round(state.editor.viewport.zoom * 100);
|
||
|
||
return (
|
||
<main className="flex h-full flex-col bg-background text-foreground">
|
||
<header className="flex h-12 items-center justify-between border-b px-4">
|
||
<h1 className="font-semibold">Image Studio</h1>
|
||
<div className="text-sm text-muted-foreground">
|
||
{state.document.name} · {zoomPercent}% · {state.editor.viewport.size.w}×{state.editor.viewport.size.h}
|
||
</div>
|
||
</header>
|
||
<section className="min-h-0 flex-1 bg-muted">
|
||
<CanvasViewport store={app.store} />
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
export default App;
|