react-frontend-common-components 0.0.50 → 0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/app-image-box/app-image-box.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import { Image } from "antd";
 import "./app-image-box.css";
 
@@ -12,6 +12,7 @@ interface AppImageBoxProps {
   text?: string;
   image: ImageType;
   className?: string;
+  handleClick?: MouseEventHandler<HTMLElement>;
 }
 
 const AppImageBox = ({
@@ -20,9 +21,10 @@ const AppImageBox = ({
   text,
   image,
   className,
+  handleClick,
 }: AppImageBoxProps) => {
   return (
-    <div className={`appImageBox ${className}`}>
+    <div className={`appImageBox ${className}`} onClick={handleClick}>
       <Image
         preview={false}
         width={width}

package/src/components/app-modal/app-modal.css

@@ -1,6 +1,5 @@
 .header {
   width: 100%;
-  padding: 0 16px;
 }
 
 .title,

package/src/components/app-sidebar/app-sidebar.tsx

@@ -6,6 +6,7 @@ const { Sider } = Layout;
 
 interface SidebarProps {
   links: {
+    onClick: (() => void) | undefined;
     label: string;
     path: string;
     icon: React.ReactNode;
@@ -31,15 +32,25 @@ const Sidebar = ({
   activeLink,
 }: SidebarProps) => {
   const handleNavigation = (path: string) => {
-    window.location.href = path;
+    if (path) {
+      window.location.href = path;
+    }
+  };
+
+  const handleClick = (path: string, onClick?: () => void) => {
+    if (onClick) {
+      onClick();
+    } else {
+      handleNavigation(path);
+    }
   };
 
   const menuItems = links.map((link) => ({
-    key: link.path,
+    key: link.path || link.label,
     icon: link.path === activeLink ? link.activeIcon : link.icon,
     className: link.path === activeLink ? "active" : "",
     label: (
-      <span onClick={() => handleNavigation(link.path)}>
+      <span onClick={() => handleClick(link.path, link.onClick)}>
         {link.label}
         {link.tag && <span className={"tag"}>{link.tag}</span>}
       </span>