Add down-, right- and left-wards arrows, still missing active state

2019-07-22 22:48:05 +02:00
parent 9d91bc32fb
commit 1866951986
13 changed files with 136 additions and 12 deletions
@@ -0,0 +1,29 @@
+import './Arrow.scss'
+import React, { FC } from 'react'
+import classNames from 'classnames'
+
+interface Props {
+  from: TalentData
+  to: TalentData
+}
+
+export const Arrow: FC<Props> = ({ from, to }) => {
+  const length = to.row === from.row 
+    ? Math.abs(to.col - from.col)
+    : to.row - from.row
+
+  const props = {
+    'data-col': from.col,
+    'data-row': from.row,
+    'data-length': length,
+  }
+
+  const className = classNames('arrow', {
+    'arrow--down': to.row > from.row,
+    'arrow--right': to.row === from.row && to.col > from.col,
+    'arrow--left': to.row === from.row && to.col < from.col,
+    'arrow--right-down': to.row === from.row + 1 && to.col === from.col + 1
+  })
+
+  return <div className={className} {...props} />
+}