1 files changed, 22 insertions, 0 deletions
diff --git a/src/components/metrics/EventData.tsx b/src/components/metrics/EventData.tsx
new file mode 100644
index 0000000..48d21c5
--- /dev/null
+++ b/src/components/metrics/EventData.tsx
@@ -0,0 +1,22 @@
+import { Column, Grid, Label, Text } from '@umami/react-zen';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { useEventDataQuery } from '@/components/hooks';
+
+export function EventData({ websiteId, eventId }: { websiteId: string; eventId: string }) {
+  const { data, isLoading, error } = useEventDataQuery(websiteId, eventId);
+
+  return (
+    <LoadingPanel isLoading={isLoading} error={error}>
+      <Grid columns="1fr 1fr" gap="5">
+        {data?.map(({ dataKey, stringValue }) => {
+          return (
+            <Column key={dataKey}>
+              <Label>{dataKey}</Label>
+              <Text>{stringValue}</Text>
+            </Column>
+          );
+        })}
+      </Grid>
+    </LoadingPanel>
+  );
+}