Merge pull request #6921 from viown/react-plugins-installed

Migrate installed plugins page to React
2025-06-09 17:36:25 -04:00
parent 02d4857a9e 4ec1dba26f
commit b79198fa0b
9 changed files with 342 additions and 272 deletions
@@ -0,0 +1,84 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardMedia from '@mui/material/CardMedia';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+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';
+
+interface IProps {
+    title?: string;
+    secondaryTitle?: string;
+    text?: string;
+    image?: string | null;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    action?: boolean;
+    actionRef?: React.MutableRefObject<HTMLButtonElement | null>;
+    onActionClick?: () => void;
+};
+
+const BaseCard = ({ title, secondaryTitle, text, image, icon, onClick, action, actionRef, onActionClick }: IProps) => {
+    return (
+        <Card
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: 240
+            }}
+        >
+            <CardActionArea onClick={onClick} sx={{
+                display: 'flex',
+                flexGrow: 1,
+                alignItems: 'stretch'
+            }}>
+                {image ? (
+                    <CardMedia
+                        sx={{ flexGrow: 1 }}
+                        image={image}
+                        title={title}
+                    />
+                ) : (
+                    <Box className={getDefaultBackgroundClass(title)} sx={{
+                        flexGrow: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}>
+                        {icon}
+                    </Box>
+                )}
+            </CardActionArea>
+            <CardHeader
+                title={
+                    <Stack direction='row' gap={1} alignItems='center'>
+                        <Typography sx={{
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis'
+                        }}>
+                            {title}
+                        </Typography>
+                        {secondaryTitle && (
+                            <Typography variant='body2' color='text.secondary'>{secondaryTitle}</Typography>
+                        )}
+                    </Stack>
+                }
+                subheader={text}
+                action={
+                    action ? (
+                        <IconButton ref={actionRef} onClick={onActionClick}>
+                            <MoreVertIcon />
+                        </IconButton>
+                    ) : null
+                }
+            />
+        </Card>
+    );
+};
+
+export default BaseCard;