Updated session profile page. Added TypeIcon component. Added useRegionNames hook.

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.module.css

@@ -1,3 +1,18 @@
 .page {
   display: grid;
+  grid-template-columns: 300px 1fr;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding-right: 20px;
+  border-right: 1px solid var(--base300);
+}
+
+.content {
+  padding-left: 20px;
 }

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

@@ -3,6 +3,7 @@ import WebsiteHeader from '../../WebsiteHeader';
 import SessionInfo from './SessionInfo';
 import { useSession } from 'components/hooks';
 import { Loading } from 'react-basics';
+import Profile from 'components/common/Profile';
 import styles from './SessionDetailsPage.module.css';
 
 export default function SessionDetailsPage({
@@ -19,9 +20,15 @@ export default function SessionDetailsPage({
   }
 
   return (
-    <div className={styles.page}>
+    <>
       <WebsiteHeader websiteId={websiteId} />
-      <SessionInfo data={data} />
-    </div>
+      <div className={styles.page}>
+        <div className={styles.sidebar}>
+          <Profile seed={data?.id} />
+          <SessionInfo data={data} />
+        </div>
+        <div className={styles.content}>oh hi.</div>
+      </div>
+    </>
   );
 }

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.module.css

@@ -0,0 +1,17 @@
+.info {
+  display: grid;
+  gap: 10px;
+}
+
+.info dt {
+  color: var(--font-color200);
+  font-weight: bold;
+}
+
+.info dd {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin: 5px 0 28px;
+  text-align: left;
+}

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

@@ -1,17 +1,62 @@
-import Profile from 'components/common/Profile';
+import { format } from 'date-fns';
+import { useFormat, useLocale, useMessages, useRegionNames } from 'components/hooks';
+import TypeIcon from 'components/common/TypeIcon';
+import { Icon, CopyIcon } from 'react-basics';
+import Icons from 'components/icons';
+import styles from './SessionInfo.module.css';
 
 export default function SessionInfo({ data }) {
+  const { locale } = useLocale();
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { getRegionName } = useRegionNames(locale);
+
   return (
-    <h1>
-      <Profile seed={data?.id} />
+    <div className={styles.info}>
       <dl>
         <dt>ID</dt>
-        <dd>{data?.id}</dd>
-        <dt>Country</dt>
-        <dd>{data?.country}</dd>
-        <dt>City</dt>
-        <dd>{data?.city}</dd>
+        <dd>
+          {data?.id} <CopyIcon value={data?.id} />
+        </dd>
+        <dt>{formatMessage(labels.firstSeen)}</dt>
+        <dd>{format(new Date(data?.firstAt), 'PPPpp')}</dd>
+        <dt>{formatMessage(labels.lastSeen)}</dt>
+        <dd>{format(new Date(data?.lastAt), 'PPPpp')}</dd>
+        <dt>{formatMessage(labels.country)}</dt>
+        <dd>
+          <TypeIcon type="country" value={data?.country} />
+          {formatValue(data?.country, 'country')}
+        </dd>
+        <dt>{formatMessage(labels.region)}</dt>
+        <dd>
+          <Icon>
+            <Icons.Location />
+          </Icon>
+          {getRegionName(data?.subdivision1)}
+        </dd>
+        <dt>{formatMessage(labels.city)}</dt>
+        <dd>
+          <Icon>
+            <Icons.Location />
+          </Icon>
+          {data?.city}
+        </dd>
+        <dt>{formatMessage(labels.os)}</dt>
+        <dd>
+          <TypeIcon type="os" value={data?.os?.toLowerCase()?.replaceAll(/\W/g, '-')} />
+          {formatValue(data?.os, 'os')}
+        </dd>
+        <dt>{formatMessage(labels.device)}</dt>
+        <dd>
+          <TypeIcon type="device" value={data?.device} />
+          {formatValue(data?.device, 'device')}
+        </dd>
+        <dt>{formatMessage(labels.browser)}</dt>
+        <dd>
+          <TypeIcon type="browser" value={data?.browser} />
+          {formatValue(data?.browser, 'browser')}
+        </dd>
       </dl>
-    </h1>
+    </div>
   );
 }