80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { countries } from 'App/constants';
|
|
import { useStore } from 'App/mstore';
|
|
import { formatTimeOrDate } from 'App/date';
|
|
import { Avatar, TextEllipsis, Tooltip } from 'UI';
|
|
import cn from 'classnames';
|
|
import { capitalize } from 'App/utils';
|
|
import { observer } from 'mobx-react-lite';
|
|
import Session from 'Types/session';
|
|
|
|
interface Props {
|
|
session: Session;
|
|
className?: string;
|
|
width?: number;
|
|
height?: number;
|
|
}
|
|
|
|
const UserCard: React.FC<Props> = ({
|
|
session, className, width, height,
|
|
}) => {
|
|
const { settingsStore } = useStore();
|
|
const { timezone } = settingsStore.sessionSettings;
|
|
|
|
const {
|
|
userBrowser,
|
|
userDevice,
|
|
userCountry,
|
|
userCity,
|
|
userOs,
|
|
startedAt,
|
|
userNumericHash,
|
|
userDisplayName,
|
|
} = session;
|
|
|
|
const avatarBgSize = '38px';
|
|
|
|
return (
|
|
<div className={cn('bg-white flex items-center w-full', className)} style={{ width, height }}>
|
|
<div className="flex items-center">
|
|
<Avatar
|
|
iconSize="23"
|
|
width={avatarBgSize}
|
|
height={avatarBgSize}
|
|
seed={userNumericHash}
|
|
/>
|
|
<div className="ml-3 overflow-hidden leading-tight">
|
|
<TextEllipsis noHint className="font-medium">
|
|
{userDisplayName}
|
|
</TextEllipsis>
|
|
<div className="text-sm text-gray-500 flex items-center">
|
|
<span style={{ whiteSpace: 'nowrap' }}>
|
|
<Tooltip
|
|
title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
|
|
className="w-fit !block"
|
|
>
|
|
{formatTimeOrDate(startedAt, timezone)}
|
|
</Tooltip>
|
|
</span>
|
|
<span className="mx-1 font-bold text-xl">·</span>
|
|
{userCity && (
|
|
<span className="mr-1">
|
|
{userCity}
|
|
,
|
|
</span>
|
|
)}
|
|
<span>{countries[userCountry]}</span>
|
|
<span className="mx-1 font-bold text-xl">·</span>
|
|
<span>
|
|
{userBrowser && `${capitalize(userBrowser)}, `}
|
|
{`${/ios/i.test(userOs) ? 'iOS' : capitalize(userOs)}, `}
|
|
{capitalize(userDevice)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default observer(UserCard);
|