pixelize-design-library 2.1.45 → 2.1.46

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 (7) hide show
  1. package/dist/App.js +3 -2
  2. package/dist/Components/NavigationBar/NavigationBar.d.ts +1 -1
  3. package/dist/Components/NavigationBar/NavigationBar.js +4 -1
  4. package/dist/Components/NavigationBar/NavigationBarProps.d.ts +2 -0
  5. package/dist/Components/Timeline/Timeline.js +57 -111
  6. package/dist/Pages/timeline.js +1 -1
  7. package/package.json +1 -1
package/dist/App.js CHANGED
@@ -92,18 +92,19 @@ function App() {
92
92
  // />
93
93
  // </Box>
94
94
  // );
95
+ var _d = (0, react_1.useState)(true), hideSidebar = _d[0], setHideSidebar = _d[1];
95
96
  return (react_1.default.createElement("div", { className: "App" },
96
97
  react_1.default.createElement(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
97
98
  react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
98
99
  react_1.default.createElement(react_2.Flex, null,
99
- react_1.default.createElement(react_2.Box, null,
100
+ react_1.default.createElement(react_2.Box, { display: hideSidebar ? "block" : "none" },
100
101
  react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, isLoading: false,
101
102
  // logo={
102
103
  // "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo"
103
104
  // }
104
105
  companyName: "PIXELIZE" })),
105
106
  react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
106
- react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", navigationBarText: {
107
+ react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", sideBarToggole: hideSidebar, onSideBarToggole: function () { return setHideSidebar(function (prev) { return !prev; }); }, navigationBarText: {
107
108
  text: "Dashboard",
108
109
  onIconClick: function () {
109
110
  console.log("Back icon clicked");
package/dist/Components/NavigationBar/NavigationBar.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { NavbarProps } from "./NavigationBarProps";
3
- export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, }: NavbarProps): React.JSX.Element;
3
+ export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole }: NavbarProps): React.JSX.Element;
package/dist/Components/NavigationBar/NavigationBar.js CHANGED
@@ -9,11 +9,14 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
9
9
  var lucide_react_1 = require("lucide-react");
10
10
  function NavBar(_a) {
11
11
  var _b, _c, _d, _e;
12
- var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText;
12
+ var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText, sideBarToggole = _a.sideBarToggole, onSideBarToggole = _a.onSideBarToggole;
13
13
  var theme = (0, useCustomTheme_1.useCustomTheme)();
14
14
  return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
15
15
  react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
16
16
  react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
17
+ react_1.default.createElement(react_2.Box, { onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "block", lg: "none", xl: "none", md: "none" } }, sideBarToggole ?
18
+ react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" }) :
19
+ react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" })),
17
20
  (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
18
21
  react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
19
22
  (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
package/dist/Components/NavigationBar/NavigationBarProps.d.ts CHANGED
@@ -11,6 +11,8 @@ export type NavbarProps = {
11
11
  text: string;
12
12
  onIconClick?: () => void;
13
13
  };
14
+ sideBarToggole?: boolean;
15
+ onSideBarToggole?: () => void;
14
16
  };
15
17
  export type MenuProps = {
16
18
  title: string;
package/dist/Components/Timeline/Timeline.js CHANGED
@@ -1,100 +1,36 @@
1
1
  "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
4
  };
9
5
  Object.defineProperty(exports, "__esModule", { value: true });
10
6
  var react_1 = __importDefault(require("react"));
11
- var styled_1 = __importDefault(require("@emotion/styled"));
12
7
  var react_2 = require("@chakra-ui/react");
13
8
  var lucide_react_1 = require("lucide-react");
14
- var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"])));
15
- var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"])));
16
- var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"])), function (_a) {
17
- var isLeft = _a.isLeft;
18
- return (isLeft ? "flex-end" : "flex-start");
19
- }, function (_a) {
20
- var isLeft = _a.isLeft;
21
- return (isLeft ? "left" : "right");
22
- });
23
- var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"])));
24
- var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n @media (max-width: 768px) {\n left: 20px; /* Move dot closer to the left */\n transform: translateX(0); /* Remove horizontal centering */\n }\n"], ["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n @media (max-width: 768px) {\n left: 20px; /* Move dot closer to the left */\n transform: translateX(0); /* Remove horizontal centering */\n }\n"])));
25
- // const Arrow = styled.div<{ isLeft: boolean }>`
26
- // position: absolute;
27
- // left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
28
- // width: 0;
29
- // height: 0;
30
- // border-style: solid;
31
- // border-width: ${({ isLeft }) =>
32
- // isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px"};
33
- // border-color: transparent #007bff transparent transparent;
34
- // transform: translateX(-50%);
35
- // top: 50%;
36
- // transform: translateY(-50%);
37
- // transform: ${({ isLeft }) =>
38
- // isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)"};
39
- // `;
40
- var EventContent = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n // margin-left: 24px;\n"], ["\n // margin-left: 24px;\n"])));
41
- var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
42
- // const EventDescription = styled.p`
43
- // margin: 0;
44
- // `;
45
- var EventDate = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"], ["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"])));
46
- var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: ", ";\n position: absolute;\n color: #6c757d;\n @media (max-width: 768px) {\n position: relative;\n left: auto;\n margin-left: 40px;\n }\n"], ["\n left: ", ";\n position: absolute;\n color: #6c757d;\n @media (max-width: 768px) {\n position: relative;\n left: auto;\n margin-left: 40px;\n }\n"])), function (_a) {
47
- var isLeft = _a.isLeft;
48
- return (isLeft ? "38% " : "53%");
49
- });
50
- var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n @media (max-width: 768px) {\n width: auto;\n padding: 5px 10px;\n }\n"], ["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n @media (max-width: 768px) {\n width: auto;\n padding: 5px 10px;\n }\n"])));
51
- var EventGroupSeparator = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
52
- var EventGroupHeader = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: relative;\n margin-bottom: 24px;\n"], ["\n position: relative;\n margin-bottom: 24px;\n"])));
53
- // const FlexContainer = styled.div`
54
- // display: flex;
55
- // align-items: center;
56
- // `;
9
+ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
10
+ var functions_1 = require("../../Utils/functions");
57
11
  var Timeline = function (_a) {
58
12
  var timelineEvents = _a.timelineEvents;
13
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
59
14
  var formatTimestamp = function (timestamp, type) {
60
15
  var parsedTimestamp = parseInt(timestamp, 10);
61
16
  var date = new Date(parsedTimestamp);
62
- if (isNaN(date.getTime())) {
17
+ if (isNaN(date.getTime()))
63
18
  return "Invalid Date";
64
- }
65
19
  if (type === "date") {
66
- var monthNames = [
67
- "January",
68
- "February",
69
- "March",
70
- "April",
71
- "May",
72
- "June",
73
- "July",
74
- "August",
75
- "September",
76
- "October",
77
- "November",
78
- "December",
79
- ];
80
- var month = monthNames[date.getMonth()];
81
- var day = date.getDate();
82
- var year = date.getFullYear();
83
- return "".concat(month, " ").concat(day, ", ").concat(year);
20
+ return date.toLocaleDateString("en-US", {
21
+ month: "long",
22
+ day: "numeric",
23
+ year: "numeric",
24
+ });
84
25
  }
85
26
  else if (type === "time") {
86
- // Convert to IST (UTC+5:30)
87
- var istOffset = 5.5 * 60 * 60 * 1000; // 5 hours 30 minutes in milliseconds
27
+ var istOffset = 5.5 * 60 * 60 * 1000;
88
28
  var istDate = new Date(date.getTime() + istOffset);
89
- var hours = istDate.getUTCHours();
90
- var minutes = istDate.getUTCMinutes();
91
- var ampm = hours >= 12 ? "PM" : "AM";
92
- // Convert hours to 12-hour format
93
- hours = hours % 12;
94
- hours = hours ? hours : 12; // the hour '0' should be '12'
95
- // Pad minutes with leading zero if needed
96
- var minutesStr = minutes < 10 ? "0" + minutes : minutes;
97
- return "".concat(hours, ":").concat(minutesStr, " ").concat(ampm);
29
+ return istDate.toLocaleTimeString("en-US", {
30
+ hour: "numeric",
31
+ minute: "2-digit",
32
+ hour12: true,
33
+ });
98
34
  }
99
35
  return date.toLocaleString();
100
36
  };
@@ -111,24 +47,21 @@ var Timeline = function (_a) {
111
47
  var groupEventsByDate = function (events) {
112
48
  return events.reduce(function (groups, event) {
113
49
  var date = formatTimestamp(event.created_at, "date");
114
- if (!groups[date]) {
50
+ if (!groups[date])
115
51
  groups[date] = [];
116
- }
117
52
  groups[date].push(event);
118
53
  return groups;
119
54
  }, {});
120
55
  };
121
56
  var groupedEvents = groupEventsByDate(timelineEvents);
122
57
  var formatChanges = function (changes) {
123
- if (changes === null) {
58
+ if (changes === null)
124
59
  return "No Changes";
125
- }
126
- var result = Object.entries(JSON.parse(changes))
60
+ return Object.entries(JSON.parse(changes))
127
61
  .map(function (_a) {
128
62
  var key = _a[0], value = _a[1];
129
63
  var changeRecord = value;
130
- if (changeRecord.original === null ||
131
- changeRecord.original === undefined) {
64
+ if (changeRecord.original === null || changeRecord.original === undefined) {
132
65
  return "".concat(key, " changed from null to ").concat(changeRecord.updated);
133
66
  }
134
67
  else {
@@ -136,31 +69,44 @@ var Timeline = function (_a) {
136
69
  }
137
70
  })
138
71
  .join("\n");
139
- return result;
140
72
  };
141
- // console.log("groupedEvents", groupedEvents);
142
- return (react_1.default.createElement(TimelineContainer, null,
143
- react_1.default.createElement(Line, null),
144
- Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(EventGroupSeparator, { key: date },
145
- react_1.default.createElement(EventGroupHeader, null,
146
- react_1.default.createElement(EventGroupDate, null, date)),
147
- groupedEvents[date].map(function (event, index) { return (react_1.default.createElement(EventContainer, { key: index, isLeft: index % 2 === 0 },
148
- react_1.default.createElement(Dot, null, getIcon(event)),
149
- react_1.default.createElement(EventTime, { isLeft: index % 2 === 0 }, formatTimestamp(event.created_at, "time")),
150
- react_1.default.createElement(Event, null,
151
- react_1.default.createElement(EventContent, null,
152
- react_1.default.createElement("div", { style: {
153
- display: "flex",
154
- alignItems: "center",
155
- justifyContent: index % 2 === 0 ? "flex-start" : "flex-end",
156
- } },
157
- react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
158
- react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), shouldWrapChildren: true, placement: "top", hasArrow: true },
159
- react_1.default.createElement(lucide_react_1.Info, { style: { marginLeft: "5px" }, size: 17 }))),
160
- react_1.default.createElement(EventDate, null, " by " +
161
- event.action_by +
162
- " " +
163
- formatTimestamp(event.created_at, "date")))))); }))); })));
73
+ var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
74
+ var getEventBgColor = function (title) {
75
+ switch (title.toLowerCase()) {
76
+ case "created":
77
+ return theme.colors.green[50];
78
+ case "updated":
79
+ return theme.colors.yellow[50];
80
+ case "delete":
81
+ return theme.colors.red[50];
82
+ default:
83
+ return theme.colors.white;
84
+ }
85
+ };
86
+ return (react_1.default.createElement(react_2.Box, { position: "relative", px: { base: 4, md: 6 }, maxW: { base: "100%", md: "50rem" }, mx: "auto" },
87
+ react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "2.188rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: theme.colors.gray[300], transform: { md: "translateX(-50%)" } }),
88
+ Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(react_2.Box, { key: date, mb: 6 },
89
+ react_1.default.createElement(react_2.Flex, { justify: "center", mb: 6 },
90
+ react_1.default.createElement(react_2.Box, { fontSize: "1rem", fontWeight: "400", color: theme.colors.black, bg: theme.colors.gray[50], border: "0.063rem solid ".concat(theme.colors.gray[300]), borderRadius: "0.313rem", px: { base: 3, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
91
+ groupedEvents[date].map(function (event, index) {
92
+ var isLeft = index % 2 === 0 && !isMobile;
93
+ var title = event.title; /* "Updated" | "Created" | Delete*/
94
+ console.log(event, "event");
95
+ return (react_1.default.createElement(react_2.Flex, { key: index, justify: isLeft ? "flex-end" : "flex-start", flexDir: { base: "column", md: "row" }, align: "center", mb: 6, position: "relative", textAlign: { base: "left", md: isLeft ? "left" : "right" } },
96
+ react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.25rem", md: "50%" }, transform: { base: "none", md: "translateX(-50%)" }, w: "1.875rem", h: "1.875rem", bg: theme.colors.gray[50], borderRadius: "full", border: "0.063rem solid ".concat(theme.colors.gray[300]), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1 }, getIcon(event)),
97
+ react_1.default.createElement(react_2.Text, { position: { base: "relative", md: "absolute" }, left: { md: isLeft ? "38%" : "53%" }, ml: { base: "3.125rem", md: 0 }, color: theme.colors.gray[500] }, formatTimestamp(event.created_at, "time")),
98
+ react_1.default.createElement(react_2.Flex, { align: "center", mt: { base: 2, md: 0 }, position: "relative" },
99
+ !isMobile && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "50%", left: isLeft ? "-4rem" : "auto", right: isLeft ? "auto" : "-4rem", transform: "translateY(-50%)", height: "0.125rem", width: "4rem", bg: theme.colors.gray[300], zIndex: 0 })),
100
+ react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat(theme.colors.gray[300]), borderRadius: "0.5rem", px: 4, py: 2, maxW: "19.625rem", boxShadow: "sm", zIndex: 1, ml: { base: "3.125rem", md: 0 } },
101
+ react_1.default.createElement(react_2.Flex, { align: "center", justify: isLeft ? "flex-start" : "flex-end" },
102
+ react_1.default.createElement(react_2.Text, { as: "h3", m: 0 }, event.action_from + " " + event.title),
103
+ react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
104
+ react_1.default.createElement(react_2.Box, { ml: 1 },
105
+ react_1.default.createElement(lucide_react_1.Info, { size: 17 })))),
106
+ react_1.default.createElement(react_2.Text, { mt: 1, color: theme.colors.gray[500] }, " by " +
107
+ (0, functions_1.toWords)(event.action_by) +
108
+ " " +
109
+ formatTimestamp(event.created_at, "date"))))));
110
+ }))); })));
164
111
  };
165
112
  exports.default = Timeline;
166
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
package/dist/Pages/timeline.js CHANGED
@@ -59,7 +59,7 @@ var TimelinePage = function () {
59
59
  },
60
60
  {
61
61
  logs_id: 8,
62
- title: "Created",
62
+ title: "Delete",
63
63
  primary_id: 66,
64
64
  is_from: "Accounts",
65
65
  action_from: "Notes",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.1.45",
3
+ "version": "2.1.46",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",