Sessions page.

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

@@ -0,0 +1,3 @@
+.page {
+  display: grid;
+}

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

@@ -0,0 +1,27 @@
+'use client';
+import WebsiteHeader from '../../WebsiteHeader';
+import SessionInfo from './SessionInfo';
+import { useSession } from 'components/hooks';
+import { Loading } from 'react-basics';
+import styles from './SessionDetailsPage.module.css';
+
+export default function SessionDetailsPage({
+  websiteId,
+  sessionId,
+}: {
+  websiteId: string;
+  sessionId: string;
+}) {
+  const { data, isLoading } = useSession(websiteId, sessionId);
+
+  if (isLoading) {
+    return <Loading position="page" />;
+  }
+
+  return (
+    <div className={styles.page}>
+      <WebsiteHeader websiteId={websiteId} />
+      <SessionInfo data={data} />
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import Profile from 'components/common/Profile';
+
+export default function SessionInfo({ data }) {
+  return (
+    <h1>
+      <Profile seed={data?.id} />
+      <dl>
+        <dt>ID</dt>
+        <dd>{data?.id}</dd>
+        <dt>Country</dt>
+        <dd>{data?.country}</dd>
+        <dt>City</dt>
+        <dd>{data?.city}</dd>
+      </dl>
+    </h1>
+  );
+}

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

@@ -0,0 +1,10 @@
+import SessionDetailsPage from './SessionDetailsPage';
+import { Metadata } from 'next';
+
+export default function WebsitePage({ params: { websiteId, sessionId } }) {
+  return <SessionDetailsPage websiteId={websiteId} sessionId={sessionId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Websites',
+};