d604f9920b
* feat ui: dashboards redesign start * more cards * fix ui: more different cards... * feat ui: finish cards, all trigger, all icons * change(ui): added missin const * feature(ui): new dashboard modal * feature(ui): new dashboard modal * change(ui): new cards * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): modal context and alert form * change(ui): table card show more with modal * change(ui): examples * change(ui): example categorize and other improvements * change(ui): example categorize and other improvements * change(ui): performance cards * change(ui): insights card * Various style updates in dashboards and other pages. (#2308) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * change(ui): fixed an issue with card create * change(ui): fixed an issue with card create * change(ui): default filters and events order * change(ui): random data * Dashboards redesign - improvments (#2313) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * various minor improvements in dashbaords. * revised dashboard widget header * change(ui): sessions by user * change(ui): funnel example * change(ui): modal height and scroll * change(ui): example cards with data * change(ui): example cards with data * change(ui): funnel bar text color * change(ui): example cards overlay click * change(ui): path analysis filter card --------- Co-authored-by: Shekar Siri <sshekarsiri@gmail.com> Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { List, Progress, Typography } from "antd";
|
|
import cn from "classnames";
|
|
|
|
interface Props {
|
|
list: any;
|
|
selected: any;
|
|
onClickHandler: (event: any, data: any) => void;
|
|
}
|
|
|
|
function CardSessionsByList({ list, selected, onClickHandler }: Props) {
|
|
return (
|
|
<List
|
|
dataSource={list}
|
|
split={false}
|
|
renderItem={(row: any) => (
|
|
<List.Item
|
|
key={row.name}
|
|
onClick={(e) => onClickHandler(e, row)} // Remove onClick handler to disable click interaction
|
|
style={{
|
|
borderBottom: '1px dotted rgba(0, 0, 0, 0.05)',
|
|
padding: '4px 10px',
|
|
lineHeight: '1px'
|
|
}}
|
|
className={cn('rounded', selected === row.name ? 'bg-active-blue' : '')} // Remove hover:bg-active-blue and cursor-pointer
|
|
>
|
|
<List.Item.Meta
|
|
className="m-0"
|
|
avatar={row.icon ? row.icon : null}
|
|
title={(
|
|
<div className="m-0">
|
|
<div className="flex justify-between m-0 p-0">
|
|
<Typography.Text>{row.name}</Typography.Text>
|
|
<Typography.Text type="secondary"> {row.sessionCount}</Typography.Text>
|
|
</div>
|
|
|
|
<Progress
|
|
percent={row.progress}
|
|
showInfo={false}
|
|
strokeColor={{
|
|
'0%': '#394EFF',
|
|
'100%': '#394EFF',
|
|
}}
|
|
size={['small', 2]}
|
|
style={{
|
|
padding: '0 0px',
|
|
margin: '0 0px',
|
|
height: 4
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default CardSessionsByList;
|