Updated avatar colors and events table.

This commit is contained in:
Mike Cao 2024-08-01 22:53:17 -07:00
parent 9c32057841
commit 3262ea0285
6 changed files with 77 additions and 116 deletions

View file

@ -2,7 +2,7 @@ import { GridTable, GridColumn } from 'react-basics';
import { useLocale, useMessages } from 'components/hooks';
import Empty from 'components/common/Empty';
import { formatDistance } from 'date-fns';
import Profile from 'components/common/Profile';
import Avatar from 'components/common/Avatar';
import Link from 'next/link';
export function EventsTable({ data = [] }) {
@ -15,18 +15,23 @@ export function EventsTable({ data = [] }) {
return (
<GridTable data={data}>
<GridColumn name="id" label="ID" />
<GridColumn name="session" label={formatMessage(labels.session)}>
<GridColumn name="session" label={formatMessage(labels.session)} width={'100px'}>
{row => (
<Link href={`/sessions/`}>
<Profile seed={row.sessionId} size={64} />
<Avatar seed={row.sessionId} size={64} />
</Link>
)}
</GridColumn>
<GridColumn name="eventName" label={formatMessage(labels.event)}>
{row => formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
<GridColumn name="event" label={formatMessage(labels.event)}>
{row => {
return (
<>
{formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
<strong>{row.eventName}</strong>
</>
);
}}
</GridColumn>
<GridColumn name="eventName" label={formatMessage(labels.name)} />
<GridColumn name="urlPath" label={formatMessage(labels.path)} />
<GridColumn name="created" label={formatMessage(labels.created)}>
{row =>

View file

@ -1,7 +1,7 @@
import Link from 'next/link';
import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
import { useFormat, useLocale, useMessages } from 'components/hooks';
import Profile from 'components/common/Profile';
import Avatar from 'components/common/Avatar';
import styles from './SessionsTable.module.css';
import { formatDate } from 'lib/date';
@ -16,7 +16,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
<GridColumn name="id" label="ID" width="300px">
{row => (
<Link href={`sessions/${row.id}`} className={styles.link}>
<Profile key={row.id} seed={row.id} size={64} />
<Avatar key={row.id} seed={row.id} size={64} />
{row.id}
</Link>
)}

View file

@ -3,7 +3,7 @@ import WebsiteHeader from '../../WebsiteHeader';
import SessionInfo from './SessionInfo';
import { useWebsiteSession } from 'components/hooks';
import { Loading } from 'react-basics';
import Profile from 'components/common/Profile';
import Avatar from 'components/common/Avatar';
import { SessionActivity } from './SessionActivity';
import { SessionStats } from './SessionStats';
import { SessionData } from './SessionData';
@ -27,7 +27,7 @@ export default function SessionDetailsPage({
<WebsiteHeader websiteId={websiteId} />
<div className={styles.page}>
<div className={styles.sidebar}>
<Profile seed={data?.id} />
<Avatar seed={data?.id} />
<SessionInfo data={data} />
</div>
<div className={styles.content}>