qbs-react-grid 1.1.41 → 1.1.42

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 (12) hide show
  1. package/es/qbsTable/CustomTableCell.js +3 -1
  2. package/es/qbsTable/commontypes.d.ts +1 -1
  3. package/es/qbsTable/utilities/menuDropDown.d.ts +1 -0
  4. package/es/qbsTable/utilities/menuDropDown.js +61 -7
  5. package/lib/qbsTable/CustomTableCell.js +3 -1
  6. package/lib/qbsTable/commontypes.d.ts +1 -1
  7. package/lib/qbsTable/utilities/menuDropDown.d.ts +1 -0
  8. package/lib/qbsTable/utilities/menuDropDown.js +61 -7
  9. package/package.json +1 -1
  10. package/src/qbsTable/CustomTableCell.tsx +2 -1
  11. package/src/qbsTable/commontypes.ts +1 -1
  12. package/src/qbsTable/utilities/menuDropDown.tsx +70 -8
package/es/qbsTable/CustomTableCell.js CHANGED
@@ -52,12 +52,14 @@ export var ActionCell = /*#__PURE__*/React.memo(function (_ref2) {
52
52
  handleMenuActions = _ref2.handleMenuActions,
53
53
  dataTheme = _ref2.dataTheme,
54
54
  actionProps = _ref2.actionProps,
55
- tableBodyRef = _ref2.tableBodyRef;
55
+ tableBodyRef = _ref2.tableBodyRef,
56
+ rowIndex = _ref2.rowIndex;
56
57
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuDropDown, {
57
58
  tableBodyRef: tableBodyRef,
58
59
  actionDropDown: actionProps,
59
60
  rowData: rowData,
60
61
  dataTheme: dataTheme,
62
+ rowIndex: rowIndex,
61
63
  handleMenuActions: handleMenuActions
62
64
  }));
63
65
  });
package/es/qbsTable/commontypes.d.ts CHANGED
@@ -41,7 +41,7 @@ export interface ActionProps {
41
41
  icon: React.ReactNode;
42
42
  toolTip?: string;
43
43
  hidden?: boolean;
44
- hide?: (data: any) => boolean;
44
+ hide?: (data: any, index?: number) => boolean;
45
45
  }
46
46
  export interface QbsTableProps {
47
47
  isLoading?: boolean;
package/es/qbsTable/utilities/menuDropDown.d.ts CHANGED
@@ -6,6 +6,7 @@ type Props = {
6
6
  rowData?: any;
7
7
  dataTheme?: string;
8
8
  tableBodyRef: React.RefObject<HTMLDivElement>;
9
+ rowIndex?: number;
9
10
  };
10
11
  declare const MenuDropDown: React.FC<Props>;
11
12
  export default MenuDropDown;
package/es/qbsTable/utilities/menuDropDown.js CHANGED
@@ -6,12 +6,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
6
6
  var actionDropDown = _ref.actionDropDown,
7
7
  handleMenuActions = _ref.handleMenuActions,
8
8
  rowData = _ref.rowData,
9
- tableBodyRef = _ref.tableBodyRef;
9
+ tableBodyRef = _ref.tableBodyRef,
10
+ rowIndex = _ref.rowIndex;
10
11
  var _useState = useState(false),
11
12
  openMenu = _useState[0],
12
13
  setOpenMenu = _useState[1];
13
14
  var menuButtonRef = useRef(null);
14
15
  var menuRef = useRef(null);
16
+ var dropRef = useRef(null);
17
+ var _useState2 = useState('bottom-position'),
18
+ dropdownPosition = _useState2[0],
19
+ setDropdownPosition = _useState2[1];
15
20
  useEffect(function () {
16
21
  var handleClickOutside = function handleClickOutside(event) {
17
22
  if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -23,9 +28,11 @@ var MenuDropDown = function MenuDropDown(_ref) {
23
28
  document.removeEventListener('click', handleClickOutside);
24
29
  };
25
30
  }, []);
26
- var toggleMenu = function toggleMenu() {
27
- setOpenMenu(!openMenu);
28
- };
31
+
32
+ // const toggleMenu = () => {
33
+ // setOpenMenu(!openMenu);
34
+ // };
35
+
29
36
  var handleMenuItemClick = function handleMenuItemClick(slug) {
30
37
  var _slug$action;
31
38
  handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
@@ -36,10 +43,50 @@ var MenuDropDown = function MenuDropDown(_ref) {
36
43
  var _result$length;
37
44
  var result = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
38
45
  var _item$hide;
39
- return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData));
46
+ return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
40
47
  });
41
48
  return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
42
49
  };
50
+ var _useState3 = useState({
51
+ top: 0,
52
+ left: 0,
53
+ bottom: 0,
54
+ right: 0
55
+ }),
56
+ menuPosition = _useState3[0],
57
+ setMenuPosition = _useState3[1];
58
+ var toggleMenu = function toggleMenu() {
59
+ if (!openMenu && menuButtonRef.current) {
60
+ var rect = menuButtonRef.current.getBoundingClientRect();
61
+ var topSpace = rect.top;
62
+ var bottomSpace = window.innerHeight - rect.bottom;
63
+ var leftSpace = rect.left;
64
+ var rightSpace = window.innerWidth - rect.right;
65
+ var dropdownHeight = 200;
66
+ var dropdownWidth = 200;
67
+ var newPosition = 'bottom-right';
68
+ if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
69
+ newPosition = 'top-right';
70
+ }
71
+ if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
72
+ newPosition = newPosition.replace('right', 'left');
73
+ }
74
+ if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
75
+ newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
76
+ }
77
+ setDropdownPosition(newPosition);
78
+ setMenuPosition({
79
+ top: rect.top + window.scrollY,
80
+ left: rect.left + window.scrollX,
81
+ bottom: window.innerHeight - rect.bottom,
82
+ right: window.innerWidth - rect.right
83
+ });
84
+ }
85
+ setTimeout(function () {
86
+ setOpenMenu(!openMenu);
87
+ }, 200);
88
+ };
89
+ var buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
43
90
  return /*#__PURE__*/React.createElement("div", {
44
91
  className: "qbs-table-menu-dropdown",
45
92
  ref: menuRef
@@ -48,10 +95,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
48
95
  onClick: toggleMenu,
49
96
  ref: menuButtonRef
50
97
  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null)), openMenu && /*#__PURE__*/React.createElement("div", {
51
- className: 'qbs-table-qbs-table-menu-dropdown-content'
98
+ className: 'qbs-table-qbs-table-menu-dropdown-content',
99
+ ref: dropRef,
100
+ style: {
101
+ top: dropdownPosition.startsWith('bottom') ? menuPosition.top + window.scrollY + 20 + "px" : 'auto',
102
+ bottom: dropdownPosition.startsWith('top') ? menuPosition.bottom + 20 + "px" : 'auto',
103
+ left: dropdownPosition.endsWith('right') ? menuPosition.left + 10 + "px" : 'auto',
104
+ right: dropdownPosition.endsWith('left') ? window.innerWidth - menuPosition.left - buttonWidth + 10 + "px" : 'auto'
105
+ }
52
106
  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
53
107
  var _item$hide2;
54
- return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData)) && /*#__PURE__*/React.createElement("a", {
108
+ return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) && /*#__PURE__*/React.createElement("a", {
55
109
  key: item.title,
56
110
  className: "p-2 leading-7 hover:bg-background ",
57
111
  onClick: function onClick(e) {
package/lib/qbsTable/CustomTableCell.js CHANGED
@@ -60,12 +60,14 @@ var ActionCell = /*#__PURE__*/_react["default"].memo(function (_ref2) {
60
60
  handleMenuActions = _ref2.handleMenuActions,
61
61
  dataTheme = _ref2.dataTheme,
62
62
  actionProps = _ref2.actionProps,
63
- tableBodyRef = _ref2.tableBodyRef;
63
+ tableBodyRef = _ref2.tableBodyRef,
64
+ rowIndex = _ref2.rowIndex;
64
65
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
65
66
  tableBodyRef: tableBodyRef,
66
67
  actionDropDown: actionProps,
67
68
  rowData: rowData,
68
69
  dataTheme: dataTheme,
70
+ rowIndex: rowIndex,
69
71
  handleMenuActions: handleMenuActions
70
72
  }));
71
73
  });
package/lib/qbsTable/commontypes.d.ts CHANGED
@@ -41,7 +41,7 @@ export interface ActionProps {
41
41
  icon: React.ReactNode;
42
42
  toolTip?: string;
43
43
  hidden?: boolean;
44
- hide?: (data: any) => boolean;
44
+ hide?: (data: any, index?: number) => boolean;
45
45
  }
46
46
  export interface QbsTableProps {
47
47
  isLoading?: boolean;
package/lib/qbsTable/utilities/menuDropDown.d.ts CHANGED
@@ -6,6 +6,7 @@ type Props = {
6
6
  rowData?: any;
7
7
  dataTheme?: string;
8
8
  tableBodyRef: React.RefObject<HTMLDivElement>;
9
+ rowIndex?: number;
9
10
  };
10
11
  declare const MenuDropDown: React.FC<Props>;
11
12
  export default MenuDropDown;
package/lib/qbsTable/utilities/menuDropDown.js CHANGED
@@ -12,12 +12,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
12
12
  var actionDropDown = _ref.actionDropDown,
13
13
  handleMenuActions = _ref.handleMenuActions,
14
14
  rowData = _ref.rowData,
15
- tableBodyRef = _ref.tableBodyRef;
15
+ tableBodyRef = _ref.tableBodyRef,
16
+ rowIndex = _ref.rowIndex;
16
17
  var _useState = (0, _react.useState)(false),
17
18
  openMenu = _useState[0],
18
19
  setOpenMenu = _useState[1];
19
20
  var menuButtonRef = (0, _react.useRef)(null);
20
21
  var menuRef = (0, _react.useRef)(null);
22
+ var dropRef = (0, _react.useRef)(null);
23
+ var _useState2 = (0, _react.useState)('bottom-position'),
24
+ dropdownPosition = _useState2[0],
25
+ setDropdownPosition = _useState2[1];
21
26
  (0, _react.useEffect)(function () {
22
27
  var handleClickOutside = function handleClickOutside(event) {
23
28
  if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -29,9 +34,11 @@ var MenuDropDown = function MenuDropDown(_ref) {
29
34
  document.removeEventListener('click', handleClickOutside);
30
35
  };
31
36
  }, []);
32
- var toggleMenu = function toggleMenu() {
33
- setOpenMenu(!openMenu);
34
- };
37
+
38
+ // const toggleMenu = () => {
39
+ // setOpenMenu(!openMenu);
40
+ // };
41
+
35
42
  var handleMenuItemClick = function handleMenuItemClick(slug) {
36
43
  var _slug$action;
37
44
  handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
@@ -42,10 +49,50 @@ var MenuDropDown = function MenuDropDown(_ref) {
42
49
  var _result$length;
43
50
  var result = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
44
51
  var _item$hide;
45
- return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData));
52
+ return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
46
53
  });
47
54
  return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
48
55
  };
56
+ var _useState3 = (0, _react.useState)({
57
+ top: 0,
58
+ left: 0,
59
+ bottom: 0,
60
+ right: 0
61
+ }),
62
+ menuPosition = _useState3[0],
63
+ setMenuPosition = _useState3[1];
64
+ var toggleMenu = function toggleMenu() {
65
+ if (!openMenu && menuButtonRef.current) {
66
+ var rect = menuButtonRef.current.getBoundingClientRect();
67
+ var topSpace = rect.top;
68
+ var bottomSpace = window.innerHeight - rect.bottom;
69
+ var leftSpace = rect.left;
70
+ var rightSpace = window.innerWidth - rect.right;
71
+ var dropdownHeight = 200;
72
+ var dropdownWidth = 200;
73
+ var newPosition = 'bottom-right';
74
+ if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
75
+ newPosition = 'top-right';
76
+ }
77
+ if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
78
+ newPosition = newPosition.replace('right', 'left');
79
+ }
80
+ if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
81
+ newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
82
+ }
83
+ setDropdownPosition(newPosition);
84
+ setMenuPosition({
85
+ top: rect.top + window.scrollY,
86
+ left: rect.left + window.scrollX,
87
+ bottom: window.innerHeight - rect.bottom,
88
+ right: window.innerWidth - rect.right
89
+ });
90
+ }
91
+ setTimeout(function () {
92
+ setOpenMenu(!openMenu);
93
+ }, 200);
94
+ };
95
+ var buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
49
96
  return /*#__PURE__*/_react["default"].createElement("div", {
50
97
  className: "qbs-table-menu-dropdown",
51
98
  ref: menuRef
@@ -54,10 +101,17 @@ var MenuDropDown = function MenuDropDown(_ref) {
54
101
  onClick: toggleMenu,
55
102
  ref: menuButtonRef
56
103
  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null)), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
57
- className: 'qbs-table-qbs-table-menu-dropdown-content'
104
+ className: 'qbs-table-qbs-table-menu-dropdown-content',
105
+ ref: dropRef,
106
+ style: {
107
+ top: dropdownPosition.startsWith('bottom') ? menuPosition.top + window.scrollY + 20 + "px" : 'auto',
108
+ bottom: dropdownPosition.startsWith('top') ? menuPosition.bottom + 20 + "px" : 'auto',
109
+ left: dropdownPosition.endsWith('right') ? menuPosition.left + 10 + "px" : 'auto',
110
+ right: dropdownPosition.endsWith('left') ? window.innerWidth - menuPosition.left - buttonWidth + 10 + "px" : 'auto'
111
+ }
58
112
  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
59
113
  var _item$hide2;
60
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData)) && /*#__PURE__*/_react["default"].createElement("a", {
114
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) && /*#__PURE__*/_react["default"].createElement("a", {
61
115
  key: item.title,
62
116
  className: "p-2 leading-7 hover:bg-background ",
63
117
  onClick: function onClick(e) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "1.1.41",
3
+ "version": "1.1.42",
4
4
  "description": "A React table component",
5
5
  "main": "lib/index.js",
6
6
  "typings": "lib/index.d.ts",
package/src/qbsTable/CustomTableCell.tsx CHANGED
@@ -37,7 +37,7 @@ export const CheckCell: React.FC<any> = React.memo(
37
37
  )
38
38
  );
39
39
  export const ActionCell: React.FC<any> = React.memo(
40
- ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef }) => {
40
+ ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef, rowIndex }) => {
41
41
  return (
42
42
  <div>
43
43
  <MenuDropDown
@@ -45,6 +45,7 @@ export const ActionCell: React.FC<any> = React.memo(
45
45
  actionDropDown={actionProps}
46
46
  rowData={rowData}
47
47
  dataTheme={dataTheme}
48
+ rowIndex={rowIndex}
48
49
  handleMenuActions={handleMenuActions}
49
50
  />
50
51
  </div>
package/src/qbsTable/commontypes.ts CHANGED
@@ -45,7 +45,7 @@ export interface ActionProps {
45
45
  icon: React.ReactNode;
46
46
  toolTip?: string;
47
47
  hidden?: boolean;
48
- hide?: (data: any) => boolean;
48
+ hide?: (data: any,index?:number) => boolean;
49
49
  }
50
50
 
51
51
  export interface QbsTableProps {
package/src/qbsTable/utilities/menuDropDown.tsx CHANGED
@@ -11,18 +11,21 @@ type Props = {
11
11
  rowData?: any;
12
12
  dataTheme?: string;
13
13
  tableBodyRef: React.RefObject<HTMLDivElement>;
14
+ rowIndex?: number;
14
15
  };
15
16
 
16
17
  const MenuDropDown: React.FC<Props> = ({
17
18
  actionDropDown,
18
19
  handleMenuActions,
19
20
  rowData,
20
- tableBodyRef
21
+ tableBodyRef,
22
+ rowIndex
21
23
  }) => {
22
24
  const [openMenu, setOpenMenu] = useState(false);
23
25
  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
24
26
  const menuRef = useRef<HTMLDivElement | null>(null);
25
-
27
+ const dropRef = useRef<HTMLDivElement | null>(null);
28
+ const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
26
29
  useEffect(() => {
27
30
  const handleClickOutside = (event: MouseEvent) => {
28
31
  if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -37,9 +40,9 @@ const MenuDropDown: React.FC<Props> = ({
37
40
  };
38
41
  }, []);
39
42
 
40
- const toggleMenu = () => {
41
- setOpenMenu(!openMenu);
42
- };
43
+ // const toggleMenu = () => {
44
+ // setOpenMenu(!openMenu);
45
+ // };
43
46
 
44
47
  const handleMenuItemClick = (slug: ActionProps) => {
45
48
  handleMenuActions?.(slug, rowData);
@@ -47,9 +50,55 @@ const MenuDropDown: React.FC<Props> = ({
47
50
  setOpenMenu(false);
48
51
  };
49
52
  const handleShowHideMenu = () => {
50
- const result = actionDropDown?.filter((item: any) => !item.hidden && !item?.hide?.(rowData));
53
+ const result = actionDropDown?.filter(
54
+ (item: any) => !item.hidden && !item?.hide?.(rowData, rowIndex)
55
+ );
51
56
  return result?.length ?? 0;
52
57
  };
58
+ const [menuPosition, setMenuPosition] = useState({
59
+ top: 0,
60
+ left: 0,
61
+ bottom: 0,
62
+ right: 0
63
+ });
64
+ const toggleMenu = () => {
65
+ if (!openMenu && menuButtonRef.current) {
66
+ const rect = menuButtonRef.current.getBoundingClientRect();
67
+ const topSpace = rect.top;
68
+ const bottomSpace = window.innerHeight - rect.bottom;
69
+ const leftSpace = rect.left;
70
+ const rightSpace = window.innerWidth - rect.right;
71
+
72
+ const dropdownHeight = 200;
73
+ const dropdownWidth = 200;
74
+
75
+ let newPosition = 'bottom-right';
76
+
77
+ if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
78
+ newPosition = 'top-right';
79
+ }
80
+
81
+ if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
82
+ newPosition = newPosition.replace('right', 'left');
83
+ }
84
+
85
+ if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
86
+ newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
87
+ }
88
+
89
+ setDropdownPosition(newPosition);
90
+ setMenuPosition({
91
+ top: rect.top + window.scrollY,
92
+ left: rect.left + window.scrollX,
93
+ bottom: window.innerHeight - rect.bottom,
94
+ right: window.innerWidth - rect.right
95
+ });
96
+ }
97
+ setTimeout(() => {
98
+ setOpenMenu(!openMenu);
99
+ }, 200);
100
+ };
101
+ const buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
53
102
  return (
54
103
  <div className="qbs-table-menu-dropdown" ref={menuRef}>
55
104
  {handleShowHideMenu() > 0 && (
@@ -58,10 +107,23 @@ const MenuDropDown: React.FC<Props> = ({
58
107
  </button>
59
108
  )}
60
109
  {openMenu && (
61
- <div className={'qbs-table-qbs-table-menu-dropdown-content'}>
110
+ <div
111
+ className={'qbs-table-qbs-table-menu-dropdown-content'}
112
+ ref={dropRef}
113
+ style={{
114
+ top: dropdownPosition.startsWith('bottom')
115
+ ? `${menuPosition.top + window.scrollY + 20}px`
116
+ : 'auto',
117
+ bottom: dropdownPosition.startsWith('top') ? `${menuPosition.bottom + 20}px` : 'auto',
118
+ left: dropdownPosition.endsWith('right') ? `${menuPosition.left + 10}px` : 'auto',
119
+ right: dropdownPosition.endsWith('left')
120
+ ? `${window.innerWidth - menuPosition.left - buttonWidth + 10}px`
121
+ : 'auto'
122
+ }}
123
+ >
62
124
  {actionDropDown?.map(item => (
63
125
  <>
64
- {!item?.hidden && !item?.hide?.(rowData) && (
126
+ {!item?.hidden && !item?.hide?.(rowData, rowIndex) && (
65
127
  <a
66
128
  key={item.title}
67
129
  className={`p-2 leading-7 hover:bg-background `}