fix: restore the play icon in the search result card; closes #171

src/components/PostCard/PostCard.Cover.tsx

@@ -25,12 +25,13 @@ export const PostCardCover: FC<PostCardCoverProps> = ({
       {...props}
       className={`post-card__cover-image ${props.className}`}
     >
-      <ResponsiveImage {...imageProps} data={imageData} />
-      {playIcon && (
-        <Icon size="small">
-          <UnfilledPlayIcon />
-        </Icon>
-      )}
+      <ResponsiveImage {...imageProps} data={imageData}>
+        {playIcon && (
+          <Icon size="small">
+            <UnfilledPlayIcon />
+          </Icon>
+        )}
+      </ResponsiveImage>
     </CustomLink>
   )
 }

src/components/PostCard/PostCard.tsx

@@ -464,10 +464,6 @@ PostCard.styles = {
         align-self: end;
       }
 
-      .post-card__cover-image button {
-        display: none;
-      }
-
       &.top-post {
         .post-card__title-text {
           ${lsdUtils.typography('h4')}

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import Image, { ImageLoader, ImageProps } from 'next/image'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { LPE } from '../../types/lpe.types'
 
 export type ResponsiveImageProps = {
@@ -24,7 +24,8 @@ export const ResponsiveImage = ({
   fill = false,
   nextImageProps,
   className,
-}: Props) => {
+  children,
+}: React.PropsWithChildren<Props>) => {
   const [loaded, setLoaded] = useState(false)
 
   const lazyUrl = `${data.url}?blur=200&px=16&auto=format`
@@ -57,9 +58,11 @@ export const ResponsiveImage = ({
     >
       <div>
         <img src={lazyUrl} alt={data.alt} title={data.alt} />
+        {children}
       </div>
       <div className={imageProps.className}>
         <Image {...imageProps} alt={data.alt} title={data.alt} />
+        {children}
       </div>
     </Container>
   )