All files / src/features/Merchants/MerchantSidePanel/ApprovalFlowPanel/components/TasksBody PendingTasksBody.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21x
64x
64x
 
 
 
 
 
 
 
 
768x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Stack } from "@mui/material";
import CardIcon from "../TaskItemCard/components/CardIcon";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { useAppTheme } from "@theme/v2/Provider";
 
type Task = {
  key: string;
  label: string;
  completed: boolean;
};
 
type Props = {
  tasksList: Task[];
};
 
const PendingTasksBody = ({ tasksList }: Props) => {
  const theme = useAppTheme();
  return (
    <Stack
      padding={`20px 0 0`}
      gap="8px"
      sx={{
        borderTop: `1px solid ${theme.palette.border?.primary}`,
      }}
    >
      {tasksList?.map(({ key, label, completed }: Task) => (
        <Stack
          direction="row"
          alignItems="center"
          gap={1}
          padding="4px 6px"
          minHeight="40px"
          key={key}
        >
          <CardIcon
            status={completed ? "completed" : "open"}
            isPending={true}
          />
          <GiveTruncateText lineClamp={1} variant="bodyS">
            {label}
          </GiveTruncateText>
        </Stack>
      ))}
    </Stack>
  );
};
 
export default PendingTasksBody;