1 | import styled from 'styled-components';
|
---|
2 | import T from '@mui/material/Table';
|
---|
3 | import TH from '@mui/material/TableHead';
|
---|
4 | import TContainer from '@mui/material/TableContainer';
|
---|
5 | import TR from '@mui/material/TableRow';
|
---|
6 | import TB from '@mui/material/TableBody';
|
---|
7 | import TC from '@mui/material/TableCell';
|
---|
8 |
|
---|
9 | import Button from '@mui/material/Button';
|
---|
10 | import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
|
---|
11 | import TextField from '@mui/material/TextField';
|
---|
12 | import PermIdentityIcon from '@mui/icons-material/PermIdentity';
|
---|
13 |
|
---|
14 | import Paper from '@mui/material/Paper';
|
---|
15 | import { Typography } from '@mui/material';
|
---|
16 |
|
---|
17 | export const TableContainer = styled(TContainer).attrs({
|
---|
18 | component: Paper,
|
---|
19 | })`
|
---|
20 | max-width: 1100px;
|
---|
21 | margin-top: 20px;
|
---|
22 | margin-left: 30px;
|
---|
23 | box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
|
---|
24 | `;
|
---|
25 |
|
---|
26 | export const TableHeaderWrapper = styled.div`
|
---|
27 | display: flex;
|
---|
28 | flex-direction: row;
|
---|
29 | justify-content: space-between;
|
---|
30 | align-content: center;
|
---|
31 | width: 100%;
|
---|
32 | border: 1px solid grey;
|
---|
33 | border-bottom: none;
|
---|
34 | padding: 10px 16px;
|
---|
35 | position: relative;
|
---|
36 | background-color: ${(props) => props.theme.palette.grey[400]};
|
---|
37 | `;
|
---|
38 |
|
---|
39 | export const TableTitle = styled(Typography).attrs({
|
---|
40 | variant: 'h4',
|
---|
41 | })`
|
---|
42 | font-size: 2rem;
|
---|
43 | font-weight: 600;
|
---|
44 | `;
|
---|
45 |
|
---|
46 | export const CreateEmployeeButton = styled(Button).attrs((props) => ({
|
---|
47 | variant: 'contained',
|
---|
48 | size: 'large',
|
---|
49 | sx: {
|
---|
50 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
51 | },
|
---|
52 | }))`
|
---|
53 | padding-left: 11px;
|
---|
54 |
|
---|
55 | :hover {
|
---|
56 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
57 | }
|
---|
58 | `;
|
---|
59 |
|
---|
60 | export const AddIcon = styled(AddCircleOutlineIcon)`
|
---|
61 | margin-right: 11px;
|
---|
62 | `;
|
---|
63 |
|
---|
64 | export const Table = styled(T).attrs({})`
|
---|
65 | th,
|
---|
66 | td {
|
---|
67 | padding: 20px;
|
---|
68 | font-size: 1rem;
|
---|
69 | }
|
---|
70 | `;
|
---|
71 |
|
---|
72 | export const IdentityIcon = styled(PermIdentityIcon).attrs((props) => ({
|
---|
73 | sx: {
|
---|
74 | color: `${props.theme.palette.primary.dark}`,
|
---|
75 | },
|
---|
76 | }))``;
|
---|
77 |
|
---|
78 | export const TableHead = styled(TH).attrs({})`
|
---|
79 | tr {
|
---|
80 | background-color: ${(props) => `${props.theme.palette.grey[900]}`};
|
---|
81 | th {
|
---|
82 | color: white;
|
---|
83 | }
|
---|
84 | }
|
---|
85 | `;
|
---|
86 |
|
---|
87 | export const TableRow = styled(TR).attrs({})``;
|
---|
88 |
|
---|
89 | export const TableBody = styled(TB).attrs({})`
|
---|
90 | tr:last-child td,
|
---|
91 | tr:last-child th {
|
---|
92 | border: none;
|
---|
93 | }
|
---|
94 |
|
---|
95 | tr:nth-of-type(odd) {
|
---|
96 | background-color: ${(props) => `${props.theme.palette.grey[400]}`};
|
---|
97 | :hover {
|
---|
98 | cursor: pointer;
|
---|
99 | background-color: ${(props) => `${props.theme.palette.grey[500]}`};
|
---|
100 | }
|
---|
101 | }
|
---|
102 |
|
---|
103 | tr:nth-of-type(even) {
|
---|
104 | background-color: ${(props) => `${props.theme.palette.grey[200]}`};
|
---|
105 | :hover {
|
---|
106 | cursor: pointer;
|
---|
107 | background-color: ${(props) => `${props.theme.palette.grey[300]}`};
|
---|
108 | }
|
---|
109 | }
|
---|
110 | `;
|
---|
111 |
|
---|
112 | export const TableCell = styled(TC).attrs({})``;
|
---|
113 |
|
---|
114 | export const ButtonTableCell = styled(TC).attrs({
|
---|
115 | sx: {
|
---|
116 | padding: 0,
|
---|
117 | },
|
---|
118 | })`
|
---|
119 | z-index: 100;
|
---|
120 | `;
|
---|
121 |
|
---|
122 | export const ToggleAccoutStatusButton = styled(Button).attrs((props) => ({
|
---|
123 | variant: 'contained',
|
---|
124 | size: 'medium',
|
---|
125 | sx: {
|
---|
126 | backgroundColor: props.$enabled
|
---|
127 | ? `${props.theme.palette.primary.main}`
|
---|
128 | : `${props.theme.palette.error.main}`,
|
---|
129 | },
|
---|
130 | }))`
|
---|
131 | :hover {
|
---|
132 | background-color: ${(props) =>
|
---|
133 | props.$enabled
|
---|
134 | ? `${props.theme.palette.primary.light}`
|
---|
135 | : `${props.theme.palette.error.light}`};
|
---|
136 | }
|
---|
137 | `;
|
---|
138 |
|
---|
139 | export const SearchField = styled(TextField).attrs({
|
---|
140 | variant: 'standard',
|
---|
141 | })`
|
---|
142 | > div:before {
|
---|
143 | border-bottom: 1px solid ${(props) => props.theme.palette.primary.dark};
|
---|
144 | }
|
---|
145 | input {
|
---|
146 | color: ${(props) => props.theme.palette.primary.dark};
|
---|
147 | font-weight: 600;
|
---|
148 | }
|
---|
149 | `;
|
---|