51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { Breadcrumbs } from "@blueprintjs/core";
|
|
import * as React from "react";
|
|
import { RendererProps } from "../../types";
|
|
import { ChefRS } from "../types";
|
|
import { KitchenDisplay } from "./kitchen-display";
|
|
import { BorderColor } from "./utils";
|
|
|
|
const styles = {
|
|
placeholderDiv: {
|
|
height: "100%",
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
fontSize: "1.2em",
|
|
},
|
|
rootContainer: {
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column" as "column",
|
|
},
|
|
callStackContainer: {
|
|
borderBottom: "1px solid " + BorderColor,
|
|
padding: "5px 10px",
|
|
},
|
|
kitchenContainer: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
},
|
|
};
|
|
|
|
export const Renderer = ({ state }: RendererProps<ChefRS>) => {
|
|
if (state == null)
|
|
return (
|
|
<div style={styles.placeholderDiv}>Run some code to see the kitchen!</div>
|
|
);
|
|
|
|
const crumbs = state.stack.map((name) => ({ text: name }));
|
|
|
|
return (
|
|
<div style={styles.rootContainer}>
|
|
<div style={styles.callStackContainer}>
|
|
<Breadcrumbs items={crumbs} />
|
|
</div>
|
|
<div style={styles.kitchenContainer}>
|
|
<KitchenDisplay state={state.currentKitchen} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|