62 lines
No EOL
1.3 KiB
JavaScript
62 lines
No EOL
1.3 KiB
JavaScript
import cn from 'classnames';
|
|
import { capitalize } from 'App/utils';
|
|
import { session as sessionRoute } from 'App/routes';
|
|
import { Icon, Avatar, Link } from 'UI';
|
|
import { deviceTypeIcon, osIcon, browserIcon } from 'App/iconNames';
|
|
import IconCard from './IconCard';
|
|
import stl from './sessionBar.css';
|
|
|
|
function SessionBar({
|
|
className,
|
|
session: {
|
|
sessionId,
|
|
viewed=false,
|
|
userBrowser,
|
|
userBrowserVersion,
|
|
userOs,
|
|
userOsVersion,
|
|
userDeviceType,
|
|
userDevice,
|
|
userDisplayName,
|
|
userNumericHash,
|
|
}
|
|
}) {
|
|
return (
|
|
<Link
|
|
to={ sessionRoute(sessionId) }
|
|
className={ cn(
|
|
className,
|
|
"block border-radius-3 thin-blue-border flex justify-between items-center p-4",
|
|
stl.wrapper
|
|
)}
|
|
>
|
|
<IconCard
|
|
avatarIcon={ <Avatar seed={ userNumericHash } /> }
|
|
title={ userDisplayName }
|
|
/>
|
|
<IconCard
|
|
icon={ browserIcon(userBrowser) }
|
|
title={ userBrowser }
|
|
text={ userBrowserVersion }
|
|
/>
|
|
<IconCard
|
|
icon={ osIcon(userOs) }
|
|
title={ userOs }
|
|
text={ userOsVersion }
|
|
/>
|
|
<IconCard
|
|
icon={ deviceTypeIcon(userDeviceType) }
|
|
title={ capitalize(userDeviceType) }
|
|
text={ userDevice }
|
|
/>
|
|
|
|
<Icon
|
|
name={ viewed ? 'play-fill' : 'play-circle-light' }
|
|
size="30"
|
|
color="teal"
|
|
/>
|
|
</Link>
|
|
);
|
|
}
|
|
SessionBar.displayName = "SessionBar";
|
|
export default SessionBar; |