1import { getClaviature } from 'claviature';
2import React from 'react';
3
4export default function Claviature({ options, onClick, onMouseDown, onMouseUp, onMouseLeave }) {
5  const svg = getClaviature({
6    options,
7    onClick,
8    onMouseDown,
9    onMouseUp,
10    onMouseLeave,
11  });
12  return (
13    <svg {...svg.attributes}>
14      {svg.children.map((el, i) => {
15        const TagName = el.name;
16        const { key, ...attributes } = el.attributes;
17        return (
18          <TagName key={`${el.name}-${i}`} {...attributes}>
19            {el.value}
20          </TagName>
21        );
22      })}
23    </svg>
24  );
25}