File size: 2,249 Bytes
819bacd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { Button, Typography, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";

export default function ChunkComponent({
  documentName,
  documentId,
  documentNumber,
  onSelectedChunk,
}) {
  const theme = useTheme();

  return (
    <>
      <Button
        onClick={() => onSelectedChunk({ documentNumber })}
        sx={{
          textTransform: "none",
          color: "inherit",
          padding: 0,
        }}
      >
        <Grid
          item
          container
          alignItems={"center"}
          xs={12}
          mb={1}
          sx={{
            backgroundColor: theme.palette.secondary.main,
            padding: "8px 12px",
            borderRadius: "10px",
            border: "1px solid",
            borderColor: theme.palette.border.default,
          }}
        >
          <Grid
            item
            container
            borderRadius={20}
            justifyContent={"center"}
            alignContent={"center"}
            border={1}
            sx={{
              backgroundColor: theme.palette.secondary.main,
              width: 35,
              height: 35,
            }}
          >
            <Typography variant="h5">{documentNumber}</Typography>
          </Grid>
          <Grid
            container
            alignItems={"center"}
            justifyContent="space-between"
            sx={{ flexGrow: 1, marginLeft: 1 }}
          >
            <Grid
              item
              container
              direction="column"
              ml={1}
              alignItems={"flex-start"}
            >
              <Grid item>
                <Typography
                  variant="h5"
                  sx={{
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {documentName.substring(0, 8)}
                </Typography>
              </Grid>
              <Grid item>
                <Typography variant="h7" color={theme.palette.border.default}>
                  {documentId}
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Button>
    </>
  );
}