norma-library 0.5.145 → 0.5.147

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (170) hide show
  1. package/.babelrc.json +18 -18
  2. package/.prettierignore +10 -10
  3. package/.prettierrc.json +20 -20
  4. package/.storybook/main.ts +20 -20
  5. package/.storybook/preview.ts +15 -15
  6. package/README.md +43 -43
  7. package/commitlint.config.js +1 -1
  8. package/dist/esm/components/StatusModal/StatusModal.d.ts +1 -0
  9. package/dist/esm/components/StatusModal/StatusModal.js +2 -2
  10. package/dist/esm/components/StatusModal/StatusModal.js.map +1 -1
  11. package/dist/esm/components/StatusModal/StatusModal.style.d.ts +3 -1
  12. package/dist/esm/components/StatusModal/StatusModal.style.js +1 -1
  13. package/dist/esm/components/StatusModal/StatusModal.style.js.map +1 -1
  14. package/dist/esm/helpers/colors.d.ts +4 -0
  15. package/dist/esm/helpers/colors.js +30 -0
  16. package/dist/esm/helpers/colors.js.map +1 -1
  17. package/docs/index.md +118 -118
  18. package/package.json +136 -136
  19. package/src/components/Accordion.tsx +39 -39
  20. package/src/components/Avatar.tsx +17 -17
  21. package/src/components/Badge.tsx +14 -14
  22. package/src/components/Box/index.tsx +12 -12
  23. package/src/components/Box/interfaces.ts +3 -3
  24. package/src/components/Box/styles.tsx +22 -22
  25. package/src/components/Breadcrumb/index.tsx +27 -27
  26. package/src/components/Breadcrumb/interface.ts +8 -8
  27. package/src/components/Breadcrumb/styles.tsx +32 -32
  28. package/src/components/Button.tsx +26 -26
  29. package/src/components/Card.tsx +37 -37
  30. package/src/components/ChatMessage.tsx +87 -87
  31. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  32. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  33. package/src/components/CheckBox.tsx +21 -21
  34. package/src/components/DateInput/index.tsx +34 -34
  35. package/src/components/DateInput/interface.ts +13 -13
  36. package/src/components/DateInput/styles.tsx +27 -27
  37. package/src/components/DatePicker.tsx +67 -67
  38. package/src/components/DropDown.tsx +24 -24
  39. package/src/components/IconButton.tsx +37 -37
  40. package/src/components/Icons.tsx +82 -82
  41. package/src/components/Modal.tsx +103 -103
  42. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  43. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  44. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  45. package/src/components/MultiSelectInput/index.tsx +60 -60
  46. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  47. package/src/components/MultiSelectInput/styles.tsx +43 -43
  48. package/src/components/Paper.tsx +12 -12
  49. package/src/components/ProgressBar.tsx +71 -71
  50. package/src/components/RadioGroup.tsx +43 -43
  51. package/src/components/RangerSlider.tsx +65 -65
  52. package/src/components/Select.tsx +74 -74
  53. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  54. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  55. package/src/components/SelectInput/index.tsx +45 -45
  56. package/src/components/SelectInput/interfaces.ts +15 -15
  57. package/src/components/SelectInput/styles.tsx +31 -31
  58. package/src/components/StatusModal/StatusModal.style.tsx +75 -75
  59. package/src/components/StatusModal/StatusModal.tsx +58 -57
  60. package/src/components/Svgs.tsx +506 -506
  61. package/src/components/Table/components/header/index.tsx +86 -86
  62. package/src/components/Table/components/header/styles.tsx +59 -59
  63. package/src/components/Table/components/index.tsx +8 -8
  64. package/src/components/Table/components/pagination/index.tsx +39 -39
  65. package/src/components/Table/components/pagination/styles.tsx +28 -28
  66. package/src/components/Table/components/tbody/index.tsx +30 -30
  67. package/src/components/Table/components/tbody/styles.tsx +4 -4
  68. package/src/components/Table/index.tsx +317 -317
  69. package/src/components/Table/interface.ts +23 -23
  70. package/src/components/Table/styles.tsx +117 -117
  71. package/src/components/Tabs.tsx +105 -105
  72. package/src/components/Tag.tsx +33 -33
  73. package/src/components/TextField.tsx +19 -19
  74. package/src/components/TextInput/index.tsx +37 -37
  75. package/src/components/TextInput/interface.ts +9 -9
  76. package/src/components/TextInput/styles.tsx +23 -23
  77. package/src/components/TimeLine.tsx +89 -89
  78. package/src/components/TimePicker.tsx +78 -78
  79. package/src/components/Typography/Text/index.tsx +20 -20
  80. package/src/components/Typography/Text/interfaces.ts +5 -5
  81. package/src/components/Typography/Text/styles.tsx +40 -40
  82. package/src/components/Typography/Title/index.tsx +22 -22
  83. package/src/components/Typography/Title/interfaces.ts +6 -6
  84. package/src/components/Typography/Title/styles.tsx +40 -40
  85. package/src/components/Typography/index.tsx +6 -6
  86. package/src/components/UncontrolledTable/components/header/index.tsx +63 -63
  87. package/src/components/UncontrolledTable/components/header/styles.tsx +60 -60
  88. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  89. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  90. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  91. package/src/components/UncontrolledTable/components/tbody/index.tsx +33 -33
  92. package/src/components/UncontrolledTable/components/tbody/styles.tsx +25 -25
  93. package/src/components/UncontrolledTable/index.tsx +221 -221
  94. package/src/components/UncontrolledTable/interface.ts +43 -43
  95. package/src/components/UncontrolledTable/styles.tsx +116 -116
  96. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +56 -56
  97. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +68 -68
  98. package/src/components/index.ts +24 -24
  99. package/src/helpers/alignments.ts +14 -14
  100. package/src/helpers/borders.ts +18 -18
  101. package/src/helpers/colors.ts +241 -206
  102. package/src/helpers/index.ts +5 -5
  103. package/src/helpers/radios.ts +24 -24
  104. package/src/helpers/sizes.ts +72 -72
  105. package/src/hooks/useClickOutside.tsx +18 -18
  106. package/src/index.ts +66 -66
  107. package/src/interfaces/Accordion.ts +12 -12
  108. package/src/interfaces/Avatar.tsx +15 -15
  109. package/src/interfaces/Badge.ts +19 -19
  110. package/src/interfaces/Button.ts +22 -22
  111. package/src/interfaces/Card.ts +11 -11
  112. package/src/interfaces/ChatMessage.ts +12 -12
  113. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  114. package/src/interfaces/CheckBox.ts +27 -27
  115. package/src/interfaces/DatePicker.ts +13 -13
  116. package/src/interfaces/DropDown.ts +14 -14
  117. package/src/interfaces/IconButton.ts +22 -22
  118. package/src/interfaces/Icons.ts +17 -17
  119. package/src/interfaces/Modal.ts +18 -18
  120. package/src/interfaces/Paper.ts +12 -12
  121. package/src/interfaces/ProgressBar.ts +29 -29
  122. package/src/interfaces/RadioGroup.ts +23 -23
  123. package/src/interfaces/RangerSlider.ts +21 -21
  124. package/src/interfaces/Select.ts +17 -17
  125. package/src/interfaces/Tabs.ts +19 -19
  126. package/src/interfaces/Tag.ts +17 -17
  127. package/src/interfaces/TextField.ts +44 -44
  128. package/src/interfaces/TimeLine.ts +11 -11
  129. package/src/interfaces/TimePicker.ts +13 -13
  130. package/src/interfaces/index.ts +23 -23
  131. package/src/providers/NormaProvider.tsx +13 -13
  132. package/src/sample-data-2.json +178 -178
  133. package/src/sample-data.json +177 -177
  134. package/src/stories/Accordion.stories.tsx +65 -65
  135. package/src/stories/Avatar.stories.tsx +123 -123
  136. package/src/stories/Badge.stories.tsx +39 -39
  137. package/src/stories/Box.stories.tsx +35 -35
  138. package/src/stories/Breadcrumb.stories.tsx +44 -44
  139. package/src/stories/Button.stories.tsx +93 -93
  140. package/src/stories/Card.stories.tsx +39 -39
  141. package/src/stories/ChatMessage.stories.tsx +84 -84
  142. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  143. package/src/stories/CheckBox.stories.tsx +88 -88
  144. package/src/stories/DateInput.stories.tsx +51 -51
  145. package/src/stories/DatePicker.stories.tsx +50 -50
  146. package/src/stories/DropDown.stories.tsx +57 -57
  147. package/src/stories/IconButton.stories.tsx +78 -78
  148. package/src/stories/Modal.stories.tsx +246 -246
  149. package/src/stories/ModalStatus.stories.tsx +46 -46
  150. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  151. package/src/stories/Paper.stories.tsx +53 -53
  152. package/src/stories/ProgressBar.stories.tsx +116 -116
  153. package/src/stories/RadioGroup.stories.tsx +87 -87
  154. package/src/stories/RangerSlider.stories.tsx +149 -149
  155. package/src/stories/Select.stories.tsx +100 -100
  156. package/src/stories/SelectInput.stories.tsx +78 -78
  157. package/src/stories/Table.stories.tsx +372 -372
  158. package/src/stories/Tabs.stories.tsx +61 -61
  159. package/src/stories/Tag.stories.tsx +56 -56
  160. package/src/stories/Text.stories.tsx +37 -37
  161. package/src/stories/TextField.stories.tsx +310 -310
  162. package/src/stories/TextInput.stories.tsx +52 -52
  163. package/src/stories/TimeLine.stories.tsx +35 -35
  164. package/src/stories/TimePicker.stories.tsx +87 -87
  165. package/src/stories/Title.stories.tsx +43 -43
  166. package/src/stories/UncontrolledTable.stories.tsx +305 -305
  167. package/src/stories/UncontrolledTabs.stories.tsx +63 -63
  168. package/src/styles/globals.scss +17 -17
  169. package/src/types/index.ts +204 -204
  170. package/vite.config.ts +15 -15
@@ -1,41 +1,41 @@
1
- import styled from "styled-components";
2
- import { TextProps } from "./interfaces";
3
-
4
- const setSize = (size: string) => {
5
- switch (size) {
6
- case "small":
7
- return "18px";
8
- case "medium":
9
- return "24px";
10
- case "large":
11
- return "30px"
12
- default:
13
- return "24px";
14
- }
15
- }
16
-
17
- const setColor = (size: string) => {
18
- switch (size) {
19
- case "default":
20
- return "#000";
21
- case "secondary":
22
- return "#666";
23
- case "success":
24
- return "#6BC235"
25
- case "warning":
26
- return "#FF7F11"
27
- case "danger":
28
- return "#D63643"
29
- case "info":
30
- return "#43BBF2"
31
- default:
32
- return "#000";
33
- }
34
- }
35
-
36
- export const Container = styled.h1<TextProps>`
37
- margin: 0;
38
- padding: 0;
39
- color: ${props => setColor(props.type)};
40
- font-size: ${props => setSize(props.size)};
1
+ import styled from "styled-components";
2
+ import { TextProps } from "./interfaces";
3
+
4
+ const setSize = (size: string) => {
5
+ switch (size) {
6
+ case "small":
7
+ return "18px";
8
+ case "medium":
9
+ return "24px";
10
+ case "large":
11
+ return "30px"
12
+ default:
13
+ return "24px";
14
+ }
15
+ }
16
+
17
+ const setColor = (size: string) => {
18
+ switch (size) {
19
+ case "default":
20
+ return "#000";
21
+ case "secondary":
22
+ return "#666";
23
+ case "success":
24
+ return "#6BC235"
25
+ case "warning":
26
+ return "#FF7F11"
27
+ case "danger":
28
+ return "#D63643"
29
+ case "info":
30
+ return "#43BBF2"
31
+ default:
32
+ return "#000";
33
+ }
34
+ }
35
+
36
+ export const Container = styled.h1<TextProps>`
37
+ margin: 0;
38
+ padding: 0;
39
+ color: ${props => setColor(props.type)};
40
+ font-size: ${props => setSize(props.size)};
41
41
  `
@@ -1,7 +1,7 @@
1
- import Text from "./Text";
2
- import Title from "./Title"
3
-
4
- export {
5
- Text,
6
- Title
1
+ import Text from "./Text";
2
+ import Title from "./Title"
3
+
4
+ export {
5
+ Text,
6
+ Title
7
7
  }
@@ -1,63 +1,63 @@
1
- import React, { useState } from 'react';
2
- import * as S from './styles';
3
- import SettingsIcon from '@mui/icons-material/Settings';
4
-
5
- const Header: React.FC<any> = ({
6
- table,
7
- showTotalResults,
8
- showSettings,
9
- showClearFiels,
10
- onClearFieldsClick,
11
- customTotalResults,
12
- clearLabel,
13
- }) => {
14
- const [openTools, setOpenTools] = useState(false);
15
-
16
- return (
17
- <S.Header $showResults={showTotalResults}>
18
- <div>
19
- {showTotalResults && (
20
- <S.Results>
21
- <S.TextResult>
22
- {customTotalResults ? customTotalResults : `${table.getRowModel().rows.length} resultados encontrados.`}
23
- </S.TextResult>
24
- </S.Results>
25
- )}
26
- {showClearFiels && (
27
- <S.TextClearSearch onClick={() => onClearFieldsClick && onClearFieldsClick()}>
28
- {clearLabel || 'Limpar busca'}
29
- </S.TextClearSearch>
30
- )}
31
- </div>
32
- <S.Tools>
33
- {showSettings ? (
34
- <S.IconTools onClick={() => setOpenTools(!openTools)}>
35
- <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
36
- </S.IconTools>
37
- ) : null}
38
- {openTools ? (
39
- <S.ListTools>
40
- {table.getAllLeafColumns().map((column: any) => {
41
- return (
42
- <div key={column.id} className="px-1">
43
- <label>
44
- <input
45
- {...{
46
- type: 'checkbox',
47
- checked: column.getIsVisible(),
48
- onChange: column.getToggleVisibilityHandler(),
49
- }}
50
- />
51
- {column.id}
52
- </label>
53
- </div>
54
- );
55
- })}
56
- </S.ListTools>
57
- ) : null}
58
- </S.Tools>
59
- </S.Header>
60
- );
61
- };
62
-
63
- export default Header;
1
+ import React, { useState } from 'react';
2
+ import * as S from './styles';
3
+ import SettingsIcon from '@mui/icons-material/Settings';
4
+
5
+ const Header: React.FC<any> = ({
6
+ table,
7
+ showTotalResults,
8
+ showSettings,
9
+ showClearFiels,
10
+ onClearFieldsClick,
11
+ customTotalResults,
12
+ clearLabel,
13
+ }) => {
14
+ const [openTools, setOpenTools] = useState(false);
15
+
16
+ return (
17
+ <S.Header $showResults={showTotalResults}>
18
+ <div>
19
+ {showTotalResults && (
20
+ <S.Results>
21
+ <S.TextResult>
22
+ {customTotalResults ? customTotalResults : `${table.getRowModel().rows.length} resultados encontrados.`}
23
+ </S.TextResult>
24
+ </S.Results>
25
+ )}
26
+ {showClearFiels && (
27
+ <S.TextClearSearch onClick={() => onClearFieldsClick && onClearFieldsClick()}>
28
+ {clearLabel || 'Limpar busca'}
29
+ </S.TextClearSearch>
30
+ )}
31
+ </div>
32
+ <S.Tools>
33
+ {showSettings ? (
34
+ <S.IconTools onClick={() => setOpenTools(!openTools)}>
35
+ <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
36
+ </S.IconTools>
37
+ ) : null}
38
+ {openTools ? (
39
+ <S.ListTools>
40
+ {table.getAllLeafColumns().map((column: any) => {
41
+ return (
42
+ <div key={column.id} className="px-1">
43
+ <label>
44
+ <input
45
+ {...{
46
+ type: 'checkbox',
47
+ checked: column.getIsVisible(),
48
+ onChange: column.getToggleVisibilityHandler(),
49
+ }}
50
+ />
51
+ {column.id}
52
+ </label>
53
+ </div>
54
+ );
55
+ })}
56
+ </S.ListTools>
57
+ ) : null}
58
+ </S.Tools>
59
+ </S.Header>
60
+ );
61
+ };
62
+
63
+ export default Header;
@@ -1,60 +1,60 @@
1
- import styled from 'styled-components';
2
-
3
- export const Header = styled.div<any>`
4
- display: flex;
5
- justify-content: space-between;
6
- width: calc(100% - 32px);
7
- margin: 0 auto;
8
- `;
9
-
10
- export const Results = styled.div`
11
- display: flex;
12
- flex-direction: column;
13
- gap: 8px;
14
- `;
15
-
16
- export const Tools = styled.div``;
17
-
18
- export const TextResult = styled.div`
19
- color: #666666;
20
- font-size: 16px;
21
- `;
22
-
23
- export const TextClearSearchContent = styled.div`
24
- height: 10px;
25
- `;
26
-
27
- export const TextClearSearch = styled.p`
28
- color: #de8b50;
29
- font-size: 14px;
30
- cursor: pointer;
31
- margin: 0;
32
- &:hover {
33
- text-decoration: underline;
34
- }
35
- `;
36
-
37
- export const IconTools = styled.div`
38
- width: 24px;
39
- height: 24px;
40
- cursor: pointer;
41
- `;
42
-
43
- export const ListTools = styled.div`
44
- padding: 12px;
45
- margin: 6px 0 0 -106px;
46
- position: absolute;
47
- background: #fff;
48
- box-shadow: 0px 3px 6px #00000029;
49
- border: 1px solid #e0e0e0;
50
- display: flex;
51
- flex-direction: column;
52
- gap: 8px;
53
- font-size: 14px;
54
- z-index: 99;
55
- label {
56
- display: flex;
57
- gap: 8px;
58
- align-items: center;
59
- }
60
- `;
1
+ import styled from 'styled-components';
2
+
3
+ export const Header = styled.div<any>`
4
+ display: flex;
5
+ justify-content: space-between;
6
+ width: calc(100% - 32px);
7
+ margin: 0 auto;
8
+ `;
9
+
10
+ export const Results = styled.div`
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: 8px;
14
+ `;
15
+
16
+ export const Tools = styled.div``;
17
+
18
+ export const TextResult = styled.div`
19
+ color: #666666;
20
+ font-size: 16px;
21
+ `;
22
+
23
+ export const TextClearSearchContent = styled.div`
24
+ height: 10px;
25
+ `;
26
+
27
+ export const TextClearSearch = styled.p`
28
+ color: #de8b50;
29
+ font-size: 14px;
30
+ cursor: pointer;
31
+ margin: 0;
32
+ &:hover {
33
+ text-decoration: underline;
34
+ }
35
+ `;
36
+
37
+ export const IconTools = styled.div`
38
+ width: 24px;
39
+ height: 24px;
40
+ cursor: pointer;
41
+ `;
42
+
43
+ export const ListTools = styled.div`
44
+ padding: 12px;
45
+ margin: 6px 0 0 -106px;
46
+ position: absolute;
47
+ background: #fff;
48
+ box-shadow: 0px 3px 6px #00000029;
49
+ border: 1px solid #e0e0e0;
50
+ display: flex;
51
+ flex-direction: column;
52
+ gap: 8px;
53
+ font-size: 14px;
54
+ z-index: 99;
55
+ label {
56
+ display: flex;
57
+ gap: 8px;
58
+ align-items: center;
59
+ }
60
+ `;
@@ -1,9 +1,9 @@
1
- import Pagination from "./pagination";
2
- import Header from "./header"
3
- import TBody from "./tbody";
4
-
5
- export {
6
- Pagination,
7
- Header,
8
- TBody
1
+ import Pagination from "./pagination";
2
+ import Header from "./header"
3
+ import TBody from "./tbody";
4
+
5
+ export {
6
+ Pagination,
7
+ Header,
8
+ TBody
9
9
  }
@@ -1,43 +1,43 @@
1
- import React from 'react';
2
- import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
3
- import * as S from './styles';
4
-
5
- interface PaginationProps {
6
- count: number;
7
- pagination: { pageIndex: number; pageSize: number };
8
- onChangePage: (page: number) => void;
9
- }
10
-
11
- const Pagination = (props: PaginationProps) => {
12
- const { count, pagination, onChangePage } = props;
13
-
14
- const PreviousPagination: React.FC<any> = () => {
15
- return <span>{'<'}</span>;
16
- };
17
-
18
- const NextPagination: React.FC<any> = () => {
19
- return <span>{'>'}</span>;
20
- };
21
-
22
- return (
23
- <S.Pagination>
24
- <div className="content">
25
- <MuiPagination
26
- onChange={(_event: React.ChangeEvent<unknown>, page: number) => onChangePage(page)}
27
- page={pagination.pageIndex}
28
- count={count}
29
- renderItem={(item: any) => (
30
- <PaginationItem
31
- classes={{ root: 'button', selected: 'button-active' }}
32
- slots={{ previous: PreviousPagination, next: NextPagination }}
33
- sx={{ height: '35px', minWidth: '35px' }}
34
- {...item}
35
- />
36
- )}
37
- />
38
- </div>
39
- </S.Pagination>
40
- );
41
- };
42
-
43
- export default Pagination;
1
+ import React from 'react';
2
+ import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
3
+ import * as S from './styles';
4
+
5
+ interface PaginationProps {
6
+ count: number;
7
+ pagination: { pageIndex: number; pageSize: number };
8
+ onChangePage: (page: number) => void;
9
+ }
10
+
11
+ const Pagination = (props: PaginationProps) => {
12
+ const { count, pagination, onChangePage } = props;
13
+
14
+ const PreviousPagination: React.FC<any> = () => {
15
+ return <span>{'<'}</span>;
16
+ };
17
+
18
+ const NextPagination: React.FC<any> = () => {
19
+ return <span>{'>'}</span>;
20
+ };
21
+
22
+ return (
23
+ <S.Pagination>
24
+ <div className="content">
25
+ <MuiPagination
26
+ onChange={(_event: React.ChangeEvent<unknown>, page: number) => onChangePage(page)}
27
+ page={pagination.pageIndex}
28
+ count={count}
29
+ renderItem={(item: any) => (
30
+ <PaginationItem
31
+ classes={{ root: 'button', selected: 'button-active' }}
32
+ slots={{ previous: PreviousPagination, next: NextPagination }}
33
+ sx={{ height: '35px', minWidth: '35px' }}
34
+ {...item}
35
+ />
36
+ )}
37
+ />
38
+ </div>
39
+ </S.Pagination>
40
+ );
41
+ };
42
+
43
+ export default Pagination;
@@ -1,29 +1,29 @@
1
- import styled from "styled-components";
2
-
3
- export const Pagination = styled.div`
4
- width: 100%;
5
- margin: 24px 0 0 0;
6
- display: flex;
7
- justify-content: center;
8
- .content {
9
- display: flex;
10
- gap: 8px;
11
- .button {
12
- border: 1px solid #E8E9EC;
13
- background: #fff;
14
- border-radius: 4px;
15
- color: #4D4F5C;
16
- cursor: pointer;
17
- &:disabled {
18
- opacity: 0.4;
19
- }
20
- }
21
- .button-active {
22
- border: 1px solid #FFDB9F;
23
- background: #FFDB9F;
24
- color: #B74616;
25
- border-radius: 4px;
26
- cursor: pointer;
27
- }
28
- }
1
+ import styled from "styled-components";
2
+
3
+ export const Pagination = styled.div`
4
+ width: 100%;
5
+ margin: 24px 0 0 0;
6
+ display: flex;
7
+ justify-content: center;
8
+ .content {
9
+ display: flex;
10
+ gap: 8px;
11
+ .button {
12
+ border: 1px solid #E8E9EC;
13
+ background: #fff;
14
+ border-radius: 4px;
15
+ color: #4D4F5C;
16
+ cursor: pointer;
17
+ &:disabled {
18
+ opacity: 0.4;
19
+ }
20
+ }
21
+ .button-active {
22
+ border: 1px solid #FFDB9F;
23
+ background: #FFDB9F;
24
+ color: #B74616;
25
+ border-radius: 4px;
26
+ cursor: pointer;
27
+ }
28
+ }
29
29
  `
@@ -1,33 +1,33 @@
1
- import React from 'react';
2
- import { flexRender } from '@tanstack/react-table';
3
- import * as S from './styles';
4
-
5
- const TBody: React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
6
- return (
7
- <tbody>
8
- {table.getRowModel().rows.map((row: any, index: number) => {
9
- return (
10
- <S.Tr
11
- key={index}
12
- $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
13
- onClick={() => (onClick ? onClick(row.original) : null)}
14
- onMouseOver={() => (onMouseOver ? onMouseOver(row.original) : null)}
15
- onMouseOut={() => (onMouseOut ? onMouseOut(row.original) : null)}
16
- >
17
- {row.getVisibleCells().map((cell: any, index: number) => {
18
- return (
19
- <S.Td key={index}>
20
- {cell.column.columnDef.type == 'action'
21
- ? cell.getValue()
22
- : flexRender(cell.column.columnDef.cell, cell.getContext())}
23
- </S.Td>
24
- );
25
- })}
26
- </S.Tr>
27
- );
28
- })}
29
- </tbody>
30
- );
31
- };
32
-
33
- export default TBody;
1
+ import React from 'react';
2
+ import { flexRender } from '@tanstack/react-table';
3
+ import * as S from './styles';
4
+
5
+ const TBody: React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
6
+ return (
7
+ <tbody>
8
+ {table.getRowModel().rows.map((row: any, index: number) => {
9
+ return (
10
+ <S.Tr
11
+ key={index}
12
+ $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
13
+ onClick={() => (onClick ? onClick(row.original) : null)}
14
+ onMouseOver={() => (onMouseOver ? onMouseOver(row.original) : null)}
15
+ onMouseOut={() => (onMouseOut ? onMouseOut(row.original) : null)}
16
+ >
17
+ {row.getVisibleCells().map((cell: any, index: number) => {
18
+ return (
19
+ <S.Td key={index}>
20
+ {cell.column.columnDef.type == 'action'
21
+ ? cell.getValue()
22
+ : flexRender(cell.column.columnDef.cell, cell.getContext())}
23
+ </S.Td>
24
+ );
25
+ })}
26
+ </S.Tr>
27
+ );
28
+ })}
29
+ </tbody>
30
+ );
31
+ };
32
+
33
+ export default TBody;
@@ -1,25 +1,25 @@
1
- import styled from 'styled-components';
2
-
3
- export const Tr = styled.tr<any>`
4
- color: inherit;
5
- display: table-row;
6
- vertical-align: middle;
7
- outline: 0;
8
- &:nth-of-type(even) {
9
- background-color: #fafafa;
10
- }
11
- `;
12
-
13
- export const Td = styled.td`
14
- font-weight: 500;
15
- font-size: 0.875rem;
16
- line-height: 1.5rem;
17
- letter-spacing: 0.01071em;
18
- display: table-cell;
19
- vertical-align: inherit;
20
- border-bottom: 1px solid rgba(224, 224, 224, 1);
21
- text-align: left;
22
- padding: 16px;
23
- color: #666666;
24
- font-size: 0.875rem;
25
- `;
1
+ import styled from 'styled-components';
2
+
3
+ export const Tr = styled.tr<any>`
4
+ color: inherit;
5
+ display: table-row;
6
+ vertical-align: middle;
7
+ outline: 0;
8
+ &:nth-of-type(even) {
9
+ background-color: #fafafa;
10
+ }
11
+ `;
12
+
13
+ export const Td = styled.td`
14
+ font-weight: 500;
15
+ font-size: 0.875rem;
16
+ line-height: 1.5rem;
17
+ letter-spacing: 0.01071em;
18
+ display: table-cell;
19
+ vertical-align: inherit;
20
+ border-bottom: 1px solid rgba(224, 224, 224, 1);
21
+ text-align: left;
22
+ padding: 16px;
23
+ color: #666666;
24
+ font-size: 0.875rem;
25
+ `;