feat: vector renderer

src/client/types/vector.raw.scss

@@ -0,0 +1,8 @@
+:scope {
+  align-items: center;
+  display: flex;
+}
+
+.separator {
+  margin: 0 0.25em;
+}

src/client/types/vector.type-renderer.jsx

@@ -0,0 +1,44 @@
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Number from './number.type-renderer';
+import propTypes from './prop-types';
+
+const decorate = compose(
+  contempo(require('./vector.raw.scss')),
+);
+
+const Vector = ({
+  dispatchers: {
+    onChange = () => {},
+  } = {},
+  value,
+}) => (
+  <span className="vector">
+    <Number.Component
+      dispatchers={{
+        onChange: (axe) => onChange([axe, value[1]]),
+      }}
+      value={value[0]}
+    />
+    <span className="separator">{' x '}</span>
+    <Number.Component
+      dispatchers={{
+        onChange: (axe) => onChange([value[0], axe]),
+      }}
+      value={value[1]}
+    />
+  </span>
+);
+
+Vector.propTypes = {
+  ...propTypes,
+  value: PropTypes.arrayOf(PropTypes.number).isRequired,
+};
+
+export default {
+  type: 'vector',
+  Component: decorate(Vector),
+};