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: 1000px;
|
---|
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 | background-color: ${(props) => props.theme.palette.grey[400]};
|
---|
36 | `;
|
---|
37 |
|
---|
38 | export const TableTitle = styled(Typography).attrs({
|
---|
39 | variant: 'h4',
|
---|
40 | })`
|
---|
41 | font-size: 2rem;
|
---|
42 | font-weight: 600;
|
---|
43 | `;
|
---|
44 |
|
---|
45 | export const CreateEmployeeButton = styled(Button).attrs((props) => ({
|
---|
46 | variant: 'contained',
|
---|
47 | size: 'large',
|
---|
48 | sx: {
|
---|
49 | backgroundColor: `${props.theme.palette.primary.main}`,
|
---|
50 | },
|
---|
51 | }))`
|
---|
52 | padding-left: 11px;
|
---|
53 |
|
---|
54 | :hover {
|
---|
55 | background-color: ${(props) => props.theme.palette.primary.dark};
|
---|
56 | }
|
---|
57 | `;
|
---|
58 |
|
---|
59 | export const AddIcon = styled(AddCircleOutlineIcon)`
|
---|
60 | margin-right: 11px;
|
---|
61 | `;
|
---|
62 |
|
---|
63 | export const Table = styled(T).attrs({})`
|
---|
64 | th,
|
---|
65 | td {
|
---|
66 | padding: 20px;
|
---|
67 | font-size: 1rem;
|
---|
68 | }
|
---|
69 | `;
|
---|
70 |
|
---|
71 | export const IdentityIcon = styled(PermIdentityIcon).attrs((props) => ({
|
---|
72 | sx: {
|
---|
73 | color: `${props.theme.palette.primary.dark}`,
|
---|
74 | },
|
---|
75 | }))``;
|
---|
76 |
|
---|
77 | export const TableHead = styled(TH).attrs({})`
|
---|
78 | tr {
|
---|
79 | background-color: ${(props) => `${props.theme.palette.grey[900]}`};
|
---|
80 | th {
|
---|
81 | color: white;
|
---|
82 | }
|
---|
83 | }
|
---|
84 | `;
|
---|
85 |
|
---|
86 | export const TableRow = styled(TR).attrs({})``;
|
---|
87 |
|
---|
88 | export const TableBody = styled(TB).attrs({})`
|
---|
89 | tr:last-child td,
|
---|
90 | tr:last-child th {
|
---|
91 | border: none;
|
---|
92 | }
|
---|
93 |
|
---|
94 | tr:nth-of-type(odd) {
|
---|
95 | background-color: ${(props) => `${props.theme.palette.grey[400]}`};
|
---|
96 | :hover {
|
---|
97 | cursor: pointer;
|
---|
98 | background-color: ${(props) => `${props.theme.palette.grey[500]}`};
|
---|
99 | }
|
---|
100 | }
|
---|
101 |
|
---|
102 | tr:nth-of-type(even) {
|
---|
103 | background-color: ${(props) => `${props.theme.palette.grey[200]}`};
|
---|
104 | :hover {
|
---|
105 | cursor: pointer;
|
---|
106 | background-color: ${(props) => `${props.theme.palette.grey[300]}`};
|
---|
107 | }
|
---|
108 | }
|
---|
109 | `;
|
---|
110 |
|
---|
111 | export const TableCell = styled(TC).attrs({})``;
|
---|
112 |
|
---|
113 | export const ButtonTableCell = styled(TC).attrs({
|
---|
114 | sx: {
|
---|
115 | padding: 0,
|
---|
116 | },
|
---|
117 | })`
|
---|
118 | z-index: 100;
|
---|
119 | `;
|
---|
120 |
|
---|
121 | export const ToggleAccoutStatusButton = styled(Button).attrs((props) => ({
|
---|
122 | variant: 'contained',
|
---|
123 | size: 'medium',
|
---|
124 | sx: {
|
---|
125 | backgroundColor: props.$enabled
|
---|
126 | ? `${props.theme.palette.primary.main}`
|
---|
127 | : `${props.theme.palette.error.main}`,
|
---|
128 | },
|
---|
129 | }))`
|
---|
130 | :hover {
|
---|
131 | background-color: ${(props) =>
|
---|
132 | props.$enabled
|
---|
133 | ? `${props.theme.palette.primary.light}`
|
---|
134 | : `${props.theme.palette.error.light}`};
|
---|
135 | }
|
---|
136 | `;
|
---|
137 |
|
---|
138 | export const SearchField = styled(TextField).attrs({
|
---|
139 | variant: 'standard',
|
---|
140 | })`
|
---|
141 | > div:before {
|
---|
142 | border-bottom: 1px solid ${(props) => props.theme.palette.primary.dark};
|
---|
143 | }
|
---|
144 | input {
|
---|
145 | color: ${(props) => props.theme.palette.primary.dark};
|
---|
146 | font-weight: 600;
|
---|
147 | }
|
---|
148 | `;
|
---|