Add optional icon to VideoPreviewImage (#2542)

Add optional `icon` prop to VideoPreviewImage to enable adding a custom icon. --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
vivid-planet · Sep 18, 2024 · 53d896b · 53d896b
1 parent 47f1ef9
commit 53d896b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/silly-scissors-fetch.md b/.changeset/silly-scissors-fetch.md
@@ -0,0 +1,5 @@
+---
+"@comet/cms-site": minor
+---
+
+Add optional `icon` prop to `VideoPreviewImage` to enable setting a custom play icon
diff --git a/packages/site/cms-site/src/blocks/helpers/VideoPreviewImage.tsx b/packages/site/cms-site/src/blocks/helpers/VideoPreviewImage.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import styled, { css } from "styled-components";
 
 import { PixelImageBlockData } from "../../blocks.generated";
@@ -9,15 +10,14 @@ export interface VideoPreviewImageProps {
     aspectRatio: string;
     sizes?: string;
     fill?: boolean;
+    icon?: ReactNode;
 }
 
-export const VideoPreviewImage = ({ onPlay, image, aspectRatio, sizes = "100vw", fill }: VideoPreviewImageProps) => {
+export const VideoPreviewImage = ({ onPlay, image, aspectRatio, sizes = "100vw", fill, icon = <PlayIcon /> }: VideoPreviewImageProps) => {
     return (
         <Root $fill={fill}>
             <PixelImageBlock data={image} aspectRatio={aspectRatio} sizes={sizes} fill={fill} />
-            <IconWrapper onClick={onPlay}>
-                <PlayIcon />
-            </IconWrapper>
+            <IconWrapper onClick={onPlay}>{icon}</IconWrapper>
         </Root>
     );
 };