summaryrefslogtreecommitdiff
path: root/components/Sidebar/Toolbar.tsx
blob: f6f1e39c71faf8b108fd7ee1712653be30aa7d6f (about) (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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'
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,
    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"
          disabled={!canUndo}
          onClick={() => previousPreviewNode()}
        />
        <IconButton
          variant="ghost"
          icon={<ChevronRightIcon />}
          aria-label="Next node"
          disabled={!canRedo}
          onClick={() => nextPreviewNode()}
        />
      </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>
  )
}