Make engagement tiles clickable (#1847)

* Add hover effect for engagement tile * Add on click functionality for engagement tile * remove unused import
bcgov · Jul 17, 2023 · e65ddb9 · e65ddb9
1 parent 4ceabbf
commit e65ddb9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx b/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx
@@ -7,7 +7,6 @@ import { openNotification } from 'services/notificationService/notificationSlice
 import { VideoWidget } from 'models/videoWidget';
 import { fetchVideoWidgets } from 'services/widgetService/VideoService';
 import ReactPlayer from 'react-player/lazy';
-import { AppConfig } from 'config';
 
 interface VideoWidgetProps {
     widget: Widget;

diff --git a/met-web/src/components/landing/EngagementTile.tsx b/met-web/src/components/landing/EngagementTile.tsx
@@ -78,7 +78,19 @@ const EngagementTile = ({ passedEngagement, engagementId }: EngagementTileProps)
     const { name, end_date, start_date, description, status_id, banner_url, submission_status } = loadedEngagement;
     const EngagementDate = `${dayjs(start_date).format(dateFormat)} to ${dayjs(end_date).format(dateFormat)}`;
     return (
-        <Card sx={{ maxWidth: 345 }}>
+        <Card
+            sx={{
+                maxWidth: 345,
+                '&:hover': {
+                    backgroundColor: '#F2F2F2',
+                    cursor: 'pointer',
+                    opacity: 0.5,
+                },
+            }}
+            onClick={() => {
+                window.open(engagementUrl, '_blank');
+            }}
+        >
             <When condition={Boolean(banner_url)}>
                 <CardMedia sx={{ height: 140 }} image={banner_url} title={name} />
             </When>