Updates session details page.

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx

@@ -1,33 +1,33 @@
-import { Text } from '@umami/react-zen';
-import { useMessages, useSessionDataQuery } from '@/components/hooks';
+import { Text, Column, Row, Label, Box } from '@umami/react-zen';
+import { useSessionDataQuery } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { DATA_TYPES } from '@/lib/constants';
-import styles from './SessionData.module.css';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
-  const { formatMessage, labels } = useMessages();
-  const { data, ...query } = useSessionDataQuery(websiteId, sessionId);
+  const { data, isLoading, error } = useSessionDataQuery(websiteId, sessionId);
+  const isEmpty = !data?.length;
 
   return (
-    <>
-      <div className={styles.header}>{formatMessage(labels.properties)}</div>
-      <LoadingPanel className={styles.data} {...query} data={data}>
-        {!data?.length && <Empty className={styles.empty} />}
+    <LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
+      {!data?.length && <Empty />}
+      <Column gap="6">
         {data?.map(({ dataKey, dataType, stringValue }) => {
           return (
-            <div key={dataKey}>
-              <div className={styles.label}>
-                <div className={styles.name}>
-                  <Text>{dataKey}</Text>
-                </div>
-                <div className={styles.type}>{DATA_TYPES[dataType]}</div>
-              </div>
-              <div className={styles.value}>{stringValue}</div>
-            </div>
+            <Column key={dataKey}>
+              <Label>{dataKey}</Label>
+              <Row alignItems="center" gap>
+                <Text>{stringValue}</Text>
+                <Box paddingY="1" paddingX="2" border borderRadius borderColor="5">
+                  <Text color="muted" size="1">
+                    {DATA_TYPES[dataType]}
+                  </Text>
+                </Box>
+              </Row>
+            </Column>
           );
         })}
-      </LoadingPanel>
-    </>
+      </Column>
+    </LoadingPanel>
   );
 }