48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Language } from "./lib/types";
|
|
|
|
import ArticleSelector from "./components/ArticleSelector/ArticleSelector";
|
|
import Panel from "./components/Panel/Panel";
|
|
import TOC from "./components/TOC/TOC";
|
|
|
|
import useUIStore from "./store/uiStore";
|
|
|
|
import styles from "./App.module.css";
|
|
import CelexSelector from "./components/CelexSelector/CelexSelector";
|
|
import { useTOC } from "./hooks/toc";
|
|
|
|
function App() {
|
|
const numPanels = useUIStore((state) => state.numPanels);
|
|
const addPanel = useUIStore((state) => state.addPanel);
|
|
const { data: toc, isPending, error } = useTOC();
|
|
|
|
if (isPending) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
if (error) {
|
|
return <div>Error: {error.message}</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={styles.App}>
|
|
<div className={styles.controls}>
|
|
<CelexSelector />
|
|
<ArticleSelector toc={toc} />
|
|
<button onClick={addPanel}>Add Panel</button>
|
|
</div>
|
|
<div className={styles.panelContainer}>
|
|
<TOC toc={toc} />
|
|
{Array.from({ length: numPanels }, (_, index) => (
|
|
<Panel
|
|
key={index}
|
|
language={
|
|
Object.values(Language)[index % Object.values(Language).length]
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|