feat(preview): node history

1 files changed, 33 insertions, 3 deletions

diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
index 458361f..f6f1e39 100644
--- a/components/Sidebar/Toolbar.tsx
+++ b/components/Sidebar/Toolbar.tsx
@@ -9,21 +9,51 @@ import {
   BiRightIndent,
 } from 'react-icons/bi'
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+import { NodeObject } from 'force-graph'
 
 export interface ToolbarProps {
   setJustification: any
   justification: number
   setIndent: any
   setFont: any
+  setPreviewNode: any
+  canUndo: any
+  canRedo: any
+  resetPreviewNode: any
+  previousPreviewNode: any
+  nextPreviewNode: any
 }
 
 export const Toolbar = (props: ToolbarProps) => {
-  const { setJustification, setIndent, setFont, justification } = props
+  const {
+    setJustification,
+    setIndent,
+    setFont,
+    justification,
+    setPreviewNode,
+    canUndo,
+    canRedo,
+    resetPreviewNode,
+    previousPreviewNode,
+    nextPreviewNode,
+  } = props
   return (
     <Flex py={3} alignItems="center" justifyContent="space-between" pr={4}>
       <Flex>
-        <IconButton variant="ghost" icon={<ChevronLeftIcon />} aria-label="Previous node" />
-        <IconButton variant="ghost" icon={<ChevronRightIcon />} aria-label="Previous node" />
+        <IconButton
+          variant="ghost"
+          icon={<ChevronLeftIcon />}
+          aria-label="Previous node"
+          disabled={!canUndo}
+          onClick={() => previousPreviewNode()}
+        />
+        <IconButton
+          variant="ghost"
+          icon={<ChevronRightIcon />}
+          aria-label="Next node"
+          disabled={!canRedo}
+          onClick={() => nextPreviewNode()}
+        />
       </Flex>
       <Flex>
         <IconButton