@campxdev/react-blueprint 0.1.22 → 0.1.23

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 (48) hide show
  1. package/package.json +1 -1
  2. package/src/components/DataDisplay/DataTable/TablePagination.tsx +5 -3
  3. package/src/components/FeedBack/Spinner/Spinner.css +32 -0
  4. package/src/components/{Layout → FeedBack}/Spinner/Spinner.stories.tsx +1 -1
  5. package/src/components/{Layout → FeedBack}/Spinner/Spinner.tsx +1 -1
  6. package/src/components/Icons/IconComponents/ActiveDevicesIcon.tsx +56 -66
  7. package/src/components/Icons/IconComponents/CheckedCheckBoxIcon.tsx +44 -0
  8. package/src/components/Icons/IconComponents/CheckedRadioIcon.tsx +44 -0
  9. package/src/components/Icons/IconComponents/DeviceIcon.tsx +58 -0
  10. package/src/components/Icons/IconComponents/InfoIcon.tsx +42 -0
  11. package/src/components/Icons/IconComponents/InstitutionsIcon.tsx +67 -103
  12. package/src/components/Icons/IconComponents/LocationIcon.tsx +50 -0
  13. package/src/components/Icons/IconComponents/NavigationIcon.tsx +21 -25
  14. package/src/components/Icons/IconComponents/ProfileIcon.tsx +0 -4
  15. package/src/components/Icons/IconComponents/TooltipIcon.tsx +26 -0
  16. package/src/components/Icons/IconComponents/UncheckCheckBoxIcon.tsx +28 -0
  17. package/src/components/Icons/IconComponents/UncheckedRadioIcon.tsx +28 -0
  18. package/src/components/Icons/export.ts +35 -18
  19. package/src/components/Input/Button/Button.tsx +1 -1
  20. package/src/components/Input/{CheckBox/CheckBox.stories.tsx → MultiCheckBox/MultiCheckBox.stories.tsx} +1 -1
  21. package/src/components/Input/{CheckBox → MultiCheckBox}/MultiCheckBox.tsx +2 -2
  22. package/src/components/Input/RadioGroup/RadioGroup.stories.tsx +43 -0
  23. package/src/components/Input/RadioGroup/RadioGroup.tsx +56 -0
  24. package/src/components/Input/SingleCheckBox/SIngleCheckBox.tsx +33 -0
  25. package/src/components/Input/SingleCheckBox/SingleCheckBox.stories.tsx +33 -0
  26. package/src/components/Input/SingleSelect/SingleSelect.tsx +59 -24
  27. package/src/components/Input/components/FetchingOptionsLoader.tsx +5 -13
  28. package/src/components/Layout/Header/AppHeader.stories.tsx +1 -1
  29. package/src/components/Layout/Header/HeaderActions/CogWheelMenu.tsx +1 -1
  30. package/src/components/Layout/Header/HeaderActions/UserBox.tsx +2 -2
  31. package/src/components/Layout/LayoutWrapper/styles.tsx +1 -1
  32. package/src/components/Layout/SideNavigation/SideNavigation.tsx +1 -1
  33. package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropDownButton.tsx +1 -1
  34. package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropDownMenu.stories.tsx +1 -1
  35. package/src/components/{TabsContainer → Navigation/TabsContainer}/TabsContainer.stories.tsx +1 -1
  36. package/src/components/export.ts +2 -3
  37. package/src/themes/darkTheme.ts +1 -0
  38. package/src/themes/lightTheme.ts +1 -0
  39. package/src/themes/typography.stories.tsx +1 -1
  40. package/.vscode/settings.json +0 -3
  41. package/src/components/Input/CheckBox/CheckBox.tsx +0 -72
  42. package/src/components/Layout/Spinner/Spinner.css +0 -32
  43. /package/src/components/{Typography → DataDisplay/Typography}/Typography.tsx +0 -0
  44. /package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropDownIcon.tsx +0 -0
  45. /package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropDownMenu.tsx +0 -0
  46. /package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropdownMenuItem.tsx +0 -0
  47. /package/src/components/{DropDownMenu → Navigation/DropDownMenu}/styles.tsx +0 -0
  48. /package/src/components/{TabsContainer → Navigation/TabsContainer}/TabsContainer.tsx +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/react-blueprint",
3
- "version": "0.1.22",
3
+ "version": "0.1.23",
4
4
  "main": "./export.ts",
5
5
  "private": false,
6
6
  "dependencies": {
package/src/components/DataDisplay/DataTable/TablePagination.tsx CHANGED
@@ -3,9 +3,9 @@ import {
3
3
  PaginationProps as MuiPaginationProps,
4
4
  Stack,
5
5
  } from "@mui/material";
6
- import { DropdownMenuItem } from "../../DropDownMenu/DropdownMenuItem";
7
- import { Typography } from "../../Typography/Typography";
6
+ import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem";
8
7
  import { DropDownButton, DropdownMenu } from "../../export";
8
+ import { Typography } from "../Typography/Typography";
9
9
 
10
10
  export type PaginationProps = {
11
11
  limit: number;
@@ -26,7 +26,9 @@ export const TablePagination = (props: PaginationProps) => {
26
26
  width="100%"
27
27
  padding="10px 30px"
28
28
  >
29
- <Typography variant="caption">{`Showing ${offset + 1} - ${offset + limit} rows of ${totalCount}`}</Typography>
29
+ <Typography variant="caption">{`Showing ${offset + 1} - ${
30
+ offset + limit
31
+ } rows of ${totalCount}`}</Typography>
30
32
  <MuiPagination
31
33
  {...props}
32
34
  variant="outlined"
package/src/components/FeedBack/Spinner/Spinner.css ADDED
@@ -0,0 +1,32 @@
1
+ .spinner {
2
+ width: 40px;
3
+ height: 40px;
4
+ border-radius: 50%;
5
+ position: relative;
6
+ animation: rotate 1s linear infinite;
7
+ scale: 0.4;
8
+ }
9
+ .spinner::before , .spinner::after {
10
+ content: "";
11
+ box-sizing: border-box;
12
+ position: absolute;
13
+ inset: 0px;
14
+ border-radius: 50%;
15
+ border: 5px solid #7D60D9;
16
+ animation: prixClipFix 1.5s linear infinite ;
17
+ }
18
+ .spinner::after{
19
+ transform: rotate3d(90, 90, 0, 180deg );
20
+ border-color: #FF3D00;
21
+ }
22
+
23
+ @keyframes rotate {
24
+ 0% {transform: rotate(0deg)}
25
+ 100% {transform: rotate(360deg)}
26
+ }
27
+
28
+ @keyframes prixClipFix {
29
+ 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
30
+ 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
31
+ 75%, 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
32
+ }
package/src/components/{Layout → FeedBack}/Spinner/Spinner.stories.tsx RENAMED
@@ -17,4 +17,4 @@ export default {
17
17
  export const Primary = {
18
18
  render: (args: any) => <Spinner {...args} />,
19
19
  args: {},
20
- };
20
+ };
package/src/components/{Layout → FeedBack}/Spinner/Spinner.tsx RENAMED
@@ -2,4 +2,4 @@ import "./Spinner.css";
2
2
 
3
3
  export const Spinner = () => {
4
4
  return <div className="spinner"></div>;
5
- };
5
+ };
package/src/components/Icons/IconComponents/ActiveDevicesIcon.tsx CHANGED
@@ -5,71 +5,61 @@ export const ActiveDevicesIcon = () => {
5
5
  const color = theme.palette.text.primary;
6
6
 
7
7
  return (
8
- <div>
9
- <svg
10
- xmlns="http://www.w3.org/2000/svg"
11
- id="Active_Devices"
12
- data-name="Active Devices"
13
- width="16"
14
- height="16"
15
- viewBox="0 0 16 16"
16
- style={{
17
- stroke: color,
18
- fill: "none",
19
- }}
20
- >
21
- <g id="monitor-mobbile">
22
- <path
23
- id="Vector"
24
- d="M5.706,10.382H3.235C.756,10.382,0,9.625,0,7.147V3.235C0,.756.756,0,3.235,0H10.1c2.478,0,3.235.756,3.235,3.235a.489.489,0,0,1-.978,0c0-1.917-.339-2.256-2.256-2.256H3.235C1.317.978.978,1.317.978,3.235V7.147c0,1.917.339,2.256,2.256,2.256H5.706a.489.489,0,1,1,0,.978Z"
25
- transform="translate(0.99 1.335)"
26
- strokeWidth="0.6"
27
- />
28
- <path
29
- id="Vector-2"
30
- data-name="Vector"
31
- d="M.489,3.932A.493.493,0,0,1,0,3.443V.489A.493.493,0,0,1,.489,0,.493.493,0,0,1,.978.489V3.443A.488.488,0,0,1,.489,3.932Z"
32
- transform="translate(6.207 10.732)"
33
- strokeWidth="0.6"
34
- />
35
- <path
36
- id="Vector-3"
37
- data-name="Vector"
38
- d="M5.359,1H.459A.484.484,0,0,1,0,.5.484.484,0,0,1,.459,0h4.9a.484.484,0,0,1,.459.5A.484.484,0,0,1,5.359,1Z"
39
- transform="translate(1.367 8.133)"
40
- strokeWidth="0.6"
41
- />
42
- <path
43
- id="Vector-4"
44
- data-name="Vector"
45
- d="M2.615.978H.489A.493.493,0,0,1,0,.489.493.493,0,0,1,.489,0H2.615A.493.493,0,0,1,3.1.489.493.493,0,0,1,2.615.978Z"
46
- transform="translate(4.081 13.687)"
47
- strokeWidth="0.6"
48
- />
49
- <path
50
- id="Vector-5"
51
- data-name="Vector"
52
- d="M4.735,8.562H2.419C.613,8.562,0,7.949,0,6.143V2.419C0,.613.613,0,2.419,0H4.735C6.541,0,7.154.613,7.154,2.419V6.143C7.154,7.956,6.541,8.562,4.735,8.562ZM2.419.978C1.141.978.978,1.141.978,2.419V6.143c0,1.278.163,1.441,1.441,1.441H4.735c1.278,0,1.441-.163,1.441-1.441V2.419c0-1.278-.163-1.441-1.441-1.441Z"
53
- transform="translate(7.856 6.102)"
54
- strokeWidth="0.6"
55
- />
56
- <path
57
- id="Vector-6"
58
- data-name="Vector"
59
- d="M.652,1.3a.657.657,0,0,1-.463-.189A.644.644,0,0,1,.052.9.709.709,0,0,1,0,.65.658.658,0,0,1,.189.193.68.68,0,0,1,.783.011L.9.05c.039.02.078.039.111.059A.647.647,0,0,1,1.3.65.709.709,0,0,1,1.252.9a.644.644,0,0,1-.137.209.4.4,0,0,1-.1.078A.619.619,0,0,1,.9,1.256a.788.788,0,0,1-.117.033A.444.444,0,0,1,.652,1.3Z"
60
- transform="translate(10.804 11.244)"
61
- strokeWidth="0.6"
62
- />
63
- <path
64
- id="Vector-7"
65
- data-name="Vector"
66
- d="M0,0H16V16H0Z"
67
- fill="none"
68
- opacity="0"
69
- strokeWidth="0.6"
70
- />
71
- </g>
72
- </svg>
73
- </div>
8
+ <svg
9
+ id="Active_Devices"
10
+ data-name="Active Devices"
11
+ xmlns="http://www.w3.org/2000/svg"
12
+ width="16"
13
+ height="16"
14
+ viewBox="0 0 16 16"
15
+ style={{
16
+ fill: color,
17
+ }}
18
+ >
19
+ <g id="monitor-mobbile">
20
+ <path
21
+ id="Vector"
22
+ d="M5.706,10.382H3.235C.756,10.382,0,9.625,0,7.147V3.235C0,.756.756,0,3.235,0H10.1c2.478,0,3.235.756,3.235,3.235a.489.489,0,0,1-.978,0c0-1.917-.339-2.256-2.256-2.256H3.235C1.317.978.978,1.317.978,3.235V7.147c0,1.917.339,2.256,2.256,2.256H5.706a.489.489,0,1,1,0,.978Z"
23
+ transform="translate(0.99 1.335)"
24
+ />
25
+ <path
26
+ id="Vector-2"
27
+ data-name="Vector"
28
+ d="M.489,3.932A.493.493,0,0,1,0,3.443V.489A.493.493,0,0,1,.489,0,.493.493,0,0,1,.978.489V3.443A.488.488,0,0,1,.489,3.932Z"
29
+ transform="translate(6.207 10.732)"
30
+ />
31
+ <path
32
+ id="Vector-3"
33
+ data-name="Vector"
34
+ d="M5.359,1H.459A.484.484,0,0,1,0,.5.484.484,0,0,1,.459,0h4.9a.484.484,0,0,1,.459.5A.484.484,0,0,1,5.359,1Z"
35
+ transform="translate(1.367 8.133)"
36
+ />
37
+ <path
38
+ id="Vector-4"
39
+ data-name="Vector"
40
+ d="M2.615.978H.489A.493.493,0,0,1,0,.489.493.493,0,0,1,.489,0H2.615A.493.493,0,0,1,3.1.489.493.493,0,0,1,2.615.978Z"
41
+ transform="translate(4.081 13.687)"
42
+ />
43
+ <path
44
+ id="Vector-5"
45
+ data-name="Vector"
46
+ d="M4.735,8.562H2.419C.613,8.562,0,7.949,0,6.143V2.419C0,.613.613,0,2.419,0H4.735C6.541,0,7.154.613,7.154,2.419V6.143C7.154,7.956,6.541,8.562,4.735,8.562ZM2.419.978C1.141.978.978,1.141.978,2.419V6.143c0,1.278.163,1.441,1.441,1.441H4.735c1.278,0,1.441-.163,1.441-1.441V2.419c0-1.278-.163-1.441-1.441-1.441Z"
47
+ transform="translate(7.856 6.102)"
48
+ />
49
+ <path
50
+ id="Vector-6"
51
+ data-name="Vector"
52
+ d="M.652,1.3a.657.657,0,0,1-.463-.189A.644.644,0,0,1,.052.9.709.709,0,0,1,0,.65.658.658,0,0,1,.189.193.68.68,0,0,1,.783.011L.9.05c.039.02.078.039.111.059A.647.647,0,0,1,1.3.65.709.709,0,0,1,1.252.9a.644.644,0,0,1-.137.209.4.4,0,0,1-.1.078A.619.619,0,0,1,.9,1.256a.788.788,0,0,1-.117.033A.444.444,0,0,1,.652,1.3Z"
53
+ transform="translate(10.804 11.244)"
54
+ />
55
+ <path
56
+ id="Vector-7"
57
+ data-name="Vector"
58
+ d="M0,0H16V16H0Z"
59
+ fill="none"
60
+ opacity="0"
61
+ />
62
+ </g>
63
+ </svg>
74
64
  );
75
65
  };
package/src/components/Icons/IconComponents/CheckedCheckBoxIcon.tsx ADDED
@@ -0,0 +1,44 @@
1
+ import { useTheme } from "@mui/material";
2
+
3
+ export const CheckedCheckboxIcon = () => {
4
+ const theme = useTheme();
5
+ const color = theme.palette.text.primary;
6
+ return (
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width="20"
10
+ height="20"
11
+ viewBox="0 0 20 20"
12
+ style={{
13
+ fill: color,
14
+ }}
15
+ >
16
+ <g
17
+ id="Group_9716"
18
+ data-name="Group 9716"
19
+ transform="translate(-130 -30.299)"
20
+ >
21
+ <g
22
+ id="Rectangle_23617"
23
+ data-name="Rectangle 23617"
24
+ transform="translate(130 30.299)"
25
+ fill="#f8f8f8"
26
+ stroke="#323167"
27
+ stroke-width="1"
28
+ >
29
+ <rect width="20" height="20" rx="3" stroke="none" />
30
+ <rect x="0.5" y="0.5" width="19" height="19" rx="2.5" fill="none" />
31
+ </g>
32
+ <rect
33
+ id="Rectangle_23618"
34
+ data-name="Rectangle 23618"
35
+ width="8"
36
+ height="8"
37
+ rx="1"
38
+ transform="translate(136 36.299)"
39
+ fill="#323167"
40
+ />
41
+ </g>
42
+ </svg>
43
+ );
44
+ };
package/src/components/Icons/IconComponents/CheckedRadioIcon.tsx ADDED
@@ -0,0 +1,44 @@
1
+ import { useTheme } from "@mui/material";
2
+
3
+ export const CheckedRadioIcon = () => {
4
+ const theme = useTheme();
5
+ const color = theme.palette.text.primary;
6
+ return (
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width="20"
10
+ height="20"
11
+ viewBox="0 0 20 20"
12
+ style={{
13
+ fill: color,
14
+ }}
15
+ >
16
+ <g
17
+ id="Group_9717"
18
+ data-name="Group 9717"
19
+ transform="translate(-0.5 -29.5)"
20
+ >
21
+ <g
22
+ id="Rectangle_23801"
23
+ data-name="Rectangle 23801"
24
+ transform="translate(0.5 29.5)"
25
+ fill="#f8f8f8"
26
+ stroke="#323167"
27
+ stroke-width="1"
28
+ >
29
+ <rect width="20" height="20" rx="10" stroke="none" />
30
+ <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="none" />
31
+ </g>
32
+ <rect
33
+ id="Rectangle_23802"
34
+ data-name="Rectangle 23802"
35
+ width="8"
36
+ height="8"
37
+ rx="4"
38
+ transform="translate(6.5 35.5)"
39
+ fill="#323167"
40
+ />
41
+ </g>
42
+ </svg>
43
+ );
44
+ };
package/src/components/Icons/IconComponents/DeviceIcon.tsx ADDED
@@ -0,0 +1,58 @@
1
+ import { useTheme } from "@mui/material";
2
+
3
+ export const DeviceIcon = () => {
4
+ const theme = useTheme();
5
+ const color = theme.palette.text.primary;
6
+ return (
7
+ <div>
8
+ <svg
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ width="20"
11
+ height="20"
12
+ viewBox="0 0 20 20"
13
+ style={{
14
+ fill: color,
15
+ }}
16
+ >
17
+ <g
18
+ id="vuesax_outline_monitor"
19
+ data-name="vuesax/outline/monitor"
20
+ transform="translate(-428 -188)"
21
+ >
22
+ <g id="monitor" transform="translate(428 188)">
23
+ <path
24
+ id="Vector"
25
+ d="M13.592,13.933H4.325C1.008,13.933,0,12.925,0,9.608V4.325C0,1.008,1.008,0,4.325,0h9.258c3.317,0,4.325,1.008,4.325,4.325V9.6C17.917,12.925,16.908,13.933,13.592,13.933ZM4.325,1.25c-2.617,0-3.075.458-3.075,3.075V9.6c0,2.617.458,3.075,3.075,3.075h9.258c2.617,0,3.075-.458,3.075-3.075V4.325c0-2.617-.458-3.075-3.075-3.075Z"
26
+ transform="translate(1.042 1.042)"
27
+ />
28
+ <path
29
+ id="Vector-2"
30
+ data-name="Vector"
31
+ d="M.625,5.233A.63.63,0,0,1,0,4.608V.625A.63.63,0,0,1,.625,0,.63.63,0,0,1,1.25.625V4.608A.63.63,0,0,1,.625,5.233Z"
32
+ transform="translate(9.375 13.725)"
33
+ />
34
+ <path
35
+ id="Vector-3"
36
+ data-name="Vector"
37
+ d="M17.292,1.25H.625A.63.63,0,0,1,0,.625.63.63,0,0,1,.625,0H17.292a.63.63,0,0,1,.625.625A.63.63,0,0,1,17.292,1.25Z"
38
+ transform="translate(1.042 10.208)"
39
+ />
40
+ <path
41
+ id="Vector-4"
42
+ data-name="Vector"
43
+ d="M8.125,1.25H.625A.63.63,0,0,1,0,.625.63.63,0,0,1,.625,0h7.5A.63.63,0,0,1,8.75.625.63.63,0,0,1,8.125,1.25Z"
44
+ transform="translate(5.625 17.708)"
45
+ />
46
+ <path
47
+ id="Vector-5"
48
+ data-name="Vector"
49
+ d="M0,0H20V20H0Z"
50
+ fill="none"
51
+ opacity="0"
52
+ />
53
+ </g>
54
+ </g>
55
+ </svg>
56
+ </div>
57
+ );
58
+ };
package/src/components/Icons/IconComponents/InfoIcon.tsx ADDED
@@ -0,0 +1,42 @@
1
+ import { useTheme } from "@mui/material";
2
+
3
+ export const InfoIcon = () => {
4
+ const theme = useTheme();
5
+ const color = theme.palette.text.primary;
6
+
7
+ return (
8
+ <svg
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ width="18"
11
+ height="18"
12
+ viewBox="0 0 18 18"
13
+ style={{
14
+ fill: color,
15
+ }}
16
+ >
17
+ <g id="info_3_" data-name="info (3)" opacity="0.7">
18
+ <g id="Group_9534" data-name="Group 9534">
19
+ <g id="Group_9533" data-name="Group 9533">
20
+ <path
21
+ id="Path_38720"
22
+ data-name="Path 38720"
23
+ d="M201.062,218.823a.874.874,0,0,1-.527-.118.548.548,0,0,1-.151-.449,2.345,2.345,0,0,1,.049-.409,4.5,4.5,0,0,1,.106-.458l.482-1.659a2.509,2.509,0,0,0,.1-.5c0-.184.024-.311.024-.384a1.075,1.075,0,0,0-.38-.854,1.6,1.6,0,0,0-1.079-.327,2.8,2.8,0,0,0-.817.135q-.433.135-.911.323l-.139.539c.094-.033.208-.069.339-.11a1.388,1.388,0,0,1,.384-.057.785.785,0,0,1,.519.127.593.593,0,0,1,.135.445,1.941,1.941,0,0,1-.045.409q-.043.215-.11.454l-.486,1.667q-.059.232-.094.47a2.93,2.93,0,0,0-.029.409,1.066,1.066,0,0,0,.409.846,1.634,1.634,0,0,0,1.095.335,2.52,2.52,0,0,0,.817-.118q.347-.118.927-.339l.131-.515a2.254,2.254,0,0,1-.323.106A1.547,1.547,0,0,1,201.062,218.823Z"
24
+ transform="translate(-190.861 -206.143)"
25
+ />
26
+ <path
27
+ id="Path_38721"
28
+ data-name="Path 38721"
29
+ d="M250.533,128.3a1.243,1.243,0,0,0-1.634,0,.977.977,0,0,0,0,1.479,1.226,1.226,0,0,0,1.634,0,.981.981,0,0,0,0-1.479Z"
30
+ transform="translate(-239.82 -123.489)"
31
+ />
32
+ <path
33
+ id="Path_38722"
34
+ data-name="Path 38722"
35
+ d="M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0ZM9,17.182A8.182,8.182,0,1,1,17.182,9,8.182,8.182,0,0,1,9,17.182Z"
36
+ />
37
+ </g>
38
+ </g>
39
+ </g>
40
+ </svg>
41
+ );
42
+ };
package/src/components/Icons/IconComponents/InstitutionsIcon.tsx CHANGED
@@ -5,108 +5,72 @@ export const InstitutionsIcon = () => {
5
5
  const color = theme.palette.text.primary;
6
6
 
7
7
  return (
8
- <div>
9
- <svg
10
- xmlns="http://www.w3.org/2000/svg"
11
- id="Institutions"
12
- width="16"
13
- height="16"
14
- viewBox="0 0 16 16"
15
- style={{
16
- stroke: color,
17
- }}
18
- >
19
- <g id="bank">
20
- <path
21
- id="Vector"
22
- d="M12.309,6.483H1.091A1.1,1.1,0,0,1,0,5.392V3.323a1.133,1.133,0,0,1,.686-1.01L6.295.07a1.205,1.205,0,0,1,.81,0l5.609,2.244a1.141,1.141,0,0,1,.686,1.01V5.392A1.1,1.1,0,0,1,12.309,6.483ZM6.7.93a.174.174,0,0,0-.062.006L1.035,3.18a.235.235,0,0,0-.1.143V5.392a.154.154,0,0,0,.156.156H12.309a.154.154,0,0,0,.156-.156V3.323a.212.212,0,0,0-.1-.143L6.756.936A.139.139,0,0,0,6.7.93Z"
23
- transform="translate(1.3 1.363)"
24
- stroke={color}
25
- strokeWidth="0.5"
26
- fill="none" // Removed fill to ensure stroke is visible
27
- />
28
- <path
29
- id="Vector-2"
30
- data-name="Vector"
31
- d="M12.932,3.428H.467A.471.471,0,0,1,0,2.96V1.091A1.1,1.1,0,0,1,1.091,0H12.309A1.1,1.1,0,0,1,13.4,1.091V2.96A.471.471,0,0,1,12.932,3.428Zm-12-.935h11.53v-1.4a.154.154,0,0,0-.156-.156H1.091a.154.154,0,0,0-.156.156Z"
32
- transform="translate(1.3 11.274)"
33
- stroke={color}
34
- strokeWidth="0.5"
35
- fill="none" // Removed fill to ensure stroke is visible
36
- />
37
- <path
38
- id="Vector-3"
39
- data-name="Vector"
40
- d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
41
- transform="translate(2.547 6.911)"
42
- stroke={color}
43
- strokeWidth="0.5"
44
- fill="none" // Removed fill to ensure stroke is visible
45
- />
46
- <path
47
- id="Vector-4"
48
- data-name="Vector"
49
- d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
50
- transform="translate(5.04 6.911)"
51
- stroke={color}
52
- strokeWidth="0.5"
53
- fill="none" // Removed fill to ensure stroke is visible
54
- />
55
- <path
56
- id="Vector-5"
57
- data-name="Vector"
58
- d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
59
- transform="translate(7.533 6.911)"
60
- stroke={color}
61
- strokeWidth="0.5"
62
- fill="none" // Removed fill to ensure stroke is visible
63
- />
64
- <path
65
- id="Vector-6"
66
- data-name="Vector"
67
- d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
68
- transform="translate(10.025 6.911)"
69
- stroke={color}
70
- strokeWidth="0.5"
71
- fill="none" // Removed fill to ensure stroke is visible
72
- />
73
- <path
74
- id="Vector-7"
75
- data-name="Vector"
76
- d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
77
- transform="translate(12.518 6.911)"
78
- stroke={color}
79
- strokeWidth="0.5"
80
- fill="none" // Removed fill to ensure stroke is visible
81
- />
82
- <path
83
- id="Vector-8"
84
- data-name="Vector"
85
- d="M14.178.935H.467A.471.471,0,0,1,0,.467.471.471,0,0,1,.467,0H14.178a.471.471,0,0,1,.467.467A.471.471,0,0,1,14.178.935Z"
86
- transform="translate(0.677 13.767)"
87
- stroke={color}
88
- strokeWidth="0.5"
89
- fill="none" // Removed fill to ensure stroke is visible
90
- />
91
- <path
92
- id="Vector-9"
93
- data-name="Vector"
94
- d="M1.4,2.8A1.4,1.4,0,1,1,2.8,1.4,1.4,1.4,0,0,1,1.4,2.8Zm0-1.87A.467.467,0,1,0,1.87,1.4.471.471,0,0,0,1.4.935Z"
95
- transform="translate(6.598 3.484)"
96
- stroke={color}
97
- strokeWidth="0.5"
98
- fill="none" // Removed fill to ensure stroke is visible
99
- />
100
- <path
101
- id="Vector-10"
102
- data-name="Vector"
103
- d="M0,0H16V16H0Z"
104
- fill="none"
105
- opacity="0"
106
- strokeWidth="0.5"
107
- />
108
- </g>
109
- </svg>
110
- </div>
8
+ <svg
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ id="Institutions"
11
+ width="16"
12
+ height="16"
13
+ viewBox="0 0 16 16"
14
+ style={{
15
+ fill: color,
16
+ }}
17
+ >
18
+ <g id="bank">
19
+ <path
20
+ id="Vector"
21
+ d="M12.309,6.483H1.091A1.1,1.1,0,0,1,0,5.392V3.323a1.133,1.133,0,0,1,.686-1.01L6.295.07a1.205,1.205,0,0,1,.81,0l5.609,2.244a1.141,1.141,0,0,1,.686,1.01V5.392A1.1,1.1,0,0,1,12.309,6.483ZM6.7.93a.174.174,0,0,0-.062.006L1.035,3.18a.235.235,0,0,0-.1.143V5.392a.154.154,0,0,0,.156.156H12.309a.154.154,0,0,0,.156-.156V3.323a.212.212,0,0,0-.1-.143L6.756.936A.139.139,0,0,0,6.7.93Z"
22
+ transform="translate(1.3 1.363)"
23
+ />
24
+ <path
25
+ id="Vector-2"
26
+ data-name="Vector"
27
+ d="M12.932,3.428H.467A.471.471,0,0,1,0,2.96V1.091A1.1,1.1,0,0,1,1.091,0H12.309A1.1,1.1,0,0,1,13.4,1.091V2.96A.471.471,0,0,1,12.932,3.428Zm-12-.935h11.53v-1.4a.154.154,0,0,0-.156-.156H1.091a.154.154,0,0,0-.156.156Z"
28
+ transform="translate(1.3 11.274)"
29
+ />
30
+ <path
31
+ id="Vector-3"
32
+ data-name="Vector"
33
+ d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
34
+ transform="translate(2.547 6.911)"
35
+ />
36
+ <path
37
+ id="Vector-4"
38
+ data-name="Vector"
39
+ d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
40
+ transform="translate(5.04 6.911)"
41
+ />
42
+ <path
43
+ id="Vector-5"
44
+ data-name="Vector"
45
+ d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
46
+ transform="translate(7.533 6.911)"
47
+ />
48
+ <path
49
+ id="Vector-6"
50
+ data-name="Vector"
51
+ d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
52
+ transform="translate(10.025 6.911)"
53
+ />
54
+ <path
55
+ id="Vector-7"
56
+ data-name="Vector"
57
+ d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
58
+ transform="translate(12.518 6.911)"
59
+ />
60
+ <path
61
+ id="Vector-8"
62
+ data-name="Vector"
63
+ d="M14.178.935H.467A.471.471,0,0,1,0,.467.471.471,0,0,1,.467,0H14.178a.471.471,0,0,1,.467.467A.471.471,0,0,1,14.178.935Z"
64
+ transform="translate(0.677 13.767)"
65
+ />
66
+ <path
67
+ id="Vector-9"
68
+ data-name="Vector"
69
+ d="M1.4,2.8A1.4,1.4,0,1,1,2.8,1.4,1.4,1.4,0,0,1,1.4,2.8Zm0-1.87A.467.467,0,1,0,1.87,1.4.471.471,0,0,0,1.4.935Z"
70
+ transform="translate(6.598 3.484)"
71
+ />
72
+ <path id="Vector-10" data-name="Vector" d="M0,0H16V16H0Z" opacity="0" />
73
+ </g>
74
+ </svg>
111
75
  );
112
76
  };
package/src/components/Icons/IconComponents/LocationIcon.tsx ADDED
@@ -0,0 +1,50 @@
1
+ import { useTheme } from "@mui/material";
2
+
3
+ export const LocationIcon = () => {
4
+ const theme = useTheme();
5
+ const color = theme.palette.text.primary;
6
+
7
+ return (
8
+ <svg
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ width="21"
11
+ height="21"
12
+ viewBox="0 0 20 20"
13
+ style={{
14
+ fill: color,
15
+ }}
16
+ >
17
+ <g
18
+ id="vuesax_outline_location"
19
+ data-name="vuesax/outline/location"
20
+ transform="translate(-428 -188)"
21
+ // opacity="0.7"
22
+ >
23
+ <g id="location" transform="translate(428 188)">
24
+ <path
25
+ id="Vector"
26
+ d="M3.225,6.442A3.221,3.221,0,1,1,6.45,3.225,3.227,3.227,0,0,1,3.225,6.442Zm0-5.192A1.975,1.975,0,1,0,5.2,3.225,1.979,1.979,0,0,0,3.225,1.25Z"
27
+ transform="translate(6.775 5.367)"
28
+ stroke-linecap="round"
29
+ stroke-linejoin="round"
30
+ />
31
+ <path
32
+ id="Vector-2"
33
+ data-name="Vector"
34
+ d="M7.814,17.925a4.976,4.976,0,0,1-3.442-1.392C1.914,14.167-.8,10.392.222,5.9A7.6,7.6,0,0,1,7.814,0h.008a7.6,7.6,0,0,1,7.592,5.908c1.017,4.492-1.7,8.258-4.158,10.625A4.976,4.976,0,0,1,7.814,17.925Zm0-16.675A6.293,6.293,0,0,0,1.447,6.175c-.9,3.925,1.567,7.308,3.8,9.45a3.688,3.688,0,0,0,5.142,0c2.225-2.142,4.692-5.525,3.808-9.45A6.317,6.317,0,0,0,7.814,1.25Z"
35
+ transform="translate(2.186 1.042)"
36
+ stroke-linecap="round"
37
+ stroke-linejoin="round"
38
+ />
39
+ <path
40
+ id="Vector-3"
41
+ data-name="Vector"
42
+ d="M0,0H20V20H0Z"
43
+ fill="none"
44
+ opacity="0"
45
+ />
46
+ </g>
47
+ </g>
48
+ </svg>
49
+ );
50
+ };