feat(preview): proper file preview with api routing

1 files changed, 61 insertions, 0 deletions

diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
new file mode 100644
index 0000000..458361f
--- /dev/null
+++ b/components/Sidebar/Toolbar.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { Text, Flex, IconButton } from '@chakra-ui/react'
+import {
+  BiAlignJustify,
+  BiAlignLeft,
+  BiAlignMiddle,
+  BiAlignRight,
+  BiFont,
+  BiRightIndent,
+} from 'react-icons/bi'
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+
+export interface ToolbarProps {
+  setJustification: any
+  justification: number
+  setIndent: any
+  setFont: any
+}
+
+export const Toolbar = (props: ToolbarProps) => {
+  const { setJustification, setIndent, setFont, justification } = 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" />
+      </Flex>
+      <Flex>
+        <IconButton
+          variant="ghost"
+          aria-label="Justify content"
+          icon={
+            [
+              <BiAlignJustify key="justify" />,
+              <BiAlignLeft key="left" />,
+              <BiAlignRight key="right" />,
+              <BiAlignMiddle key="center" />,
+            ][justification]
+          }
+          onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
+        />
+        <IconButton
+          variant="ghost"
+          aria-label="Indent Text"
+          icon={<BiRightIndent />}
+          onClick={() => {
+            setIndent((curr: number) => (curr ? 0 : 1))
+          }}
+        />
+        <IconButton
+          variant="ghost"
+          aria-label="Change font"
+          icon={<BiFont />}
+          onClick={() => {
+            setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif'))
+          }}
+        />
+      </Flex>
+    </Flex>
+  )
+}