Event data report UI.

components/pages/reports/ParameterList.js

@@ -0,0 +1,33 @@
+import { Icon, Text, TooltipPopup } from 'react-basics';
+import Icons from 'components/icons';
+import Empty from 'components/common/Empty';
+import { useMessages } from 'hooks';
+import styles from './ParameterList.module.css';
+
+export function ParameterList({ items = [], children, onRemove }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <div className={styles.list}>
+      {!items.length && <Empty message={formatMessage(labels.none)} />}
+      {items.map((item, index) => {
+        return (
+          <div key={index} className={styles.item}>
+            <Text>{typeof children === 'function' ? children(item) : item}</Text>
+            <TooltipPopup
+              className={styles.icon}
+              label={formatMessage(labels.remove)}
+              position="right"
+            >
+              <Icon onClick={onRemove.bind(null, index)}>
+                <Icons.Close />
+              </Icon>
+            </TooltipPopup>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ParameterList;