Merge pull request #6951 from viown/react-plugins-available

Migrate plugins catalog to React

src/apps/dashboard/components/BaseCard.tsx

@@ -9,6 +9,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 import CardActionArea from '@mui/material/CardActionArea';
 import Stack from '@mui/material/Stack';
+import { Link, To } from 'react-router-dom';
 
 interface IProps {
     title?: string;
@@ -16,13 +17,14 @@ interface IProps {
     text?: string;
     image?: string | null;
     icon?: React.ReactNode;
+    to?: To;
     onClick?: () => void;
     action?: boolean;
     actionRef?: React.MutableRefObject<HTMLButtonElement | null>;
     onActionClick?: () => void;
 };
 
-const BaseCard = ({ title, secondaryTitle, text, image, icon, onClick, action, actionRef, onActionClick }: IProps) => {
+const BaseCard = ({ title, secondaryTitle, text, image, icon, to, onClick, action, actionRef, onActionClick }: IProps) => {
     return (
         <Card
             sx={{
@@ -31,11 +33,18 @@ const BaseCard = ({ title, secondaryTitle, text, image, icon, onClick, action, a
                 height: 240
             }}
         >
-            <CardActionArea onClick={onClick} sx={{
-                display: 'flex',
-                flexGrow: 1,
-                alignItems: 'stretch'
-            }}>
+            <CardActionArea
+                {...(to && {
+                    component: Link,
+                    to: to
+                })}
+                onClick={onClick}
+                sx={{
+                    display: 'flex',
+                    flexGrow: 1,
+                    alignItems: 'stretch'
+                }}
+            >
                 {image ? (
                     <CardMedia
                         sx={{ flexGrow: 1 }}