creator/app/src/App.tsx
enricobuehler 5791b61a48 add app readme
lots of styling improvements
fix dark/bright mode
2023-06-21 13:10:01 +02:00

41 lines
1.4 KiB
TypeScript

import "./App.css";
import Timeline from "./components/Timeline";
import Canvas from "./components/Canvas";
import Properties, { PropertiesContainer } from "components/Properties";
import ToolBar from "components/ToolBar";
import useKeyControls from "hooks/useKeyControls";
import { useFontsStore } from "stores/fonts.store";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import ScrollBar from "components/ScrollArea";
export default function App() {
const fontsStoreDidInit = useFontsStore((store) => store.didInit);
useKeyControls();
return (
<div className="bg-neutral h-full w-full flex flex-col overflow-hidden">
{/* <MenuBar /> */}
<div className="flex flex-row flex-[1] overflow-hidden">
<ToolBar />
{fontsStoreDidInit && (
<ScrollArea.Root className="w-full">
<ScrollArea.Viewport className="w-full h-full">
<div className="flex w-full flex-col pl-4 gap-4 pr-4 overflow-x-hidden overflow-y-auto">
<div className="flex w-full gap-4 flex-col lg:flex-row justify-center items-center mt-4">
<Canvas />
<PropertiesContainer>
<Properties />
</PropertiesContainer>
</div>
<Timeline />
</div>
</ScrollArea.Viewport>
<ScrollBar />
</ScrollArea.Root>
)}
</div>
</div>
);
}