add href to image

Author: SKairinos

package-lock.json

@@ -33,6 +33,7 @@
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.2",
     "semantic-release": "^20.1.1",
     "typescript": "^4.9.5",
     "eslint": "^8.35.0",
@@ -44,7 +45,8 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.2"
   },
   "release": {
     "branches": [

package.json

@@ -1,20 +1,37 @@
 import React from 'react';
 import { Box, BoxProps } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 
 export interface ImageProps {
   alt: string
   src: string
+  href?: string
   boxProps?: BoxProps
 }
 
-const Image: React.FC<ImageProps> = ({ alt, src, boxProps = {} }) => {
-  const { sx, ...otherProps } = boxProps;
+const Image: React.FC<ImageProps> = ({
+  alt, src, href, boxProps = {}
+}) => {
+  let {
+    sx,
+    onClick,
+    style = {},
+    ...otherProps
+  } = boxProps;
+
+  if (href !== undefined) {
+    const navigate = useNavigate();
+    onClick = () => navigate(href);
+    style.cursor = 'pointer';
+  }
 
   return (
     <Box
       component='img'
       alt={alt}
       src={src}
+      onClick={onClick}
+      style={style}
       sx={{
         width: '100%',
         ...sx