Add Thumbnail component to the common components

src/content-helper/common/components/thumbnail/component.tsx

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { page } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { HydratedPost } from '../../base-wordpress-provider';
+
+/**
+ * Defines the props structure for Thumbnail.
+ *
+ * @since 3.18.0
+ */
+interface ThumbnailProps {
+    post?: HydratedPost;
+    imageUrl?: string;
+    icon?: React.JSX.Element;
+    size?: number;
+    className?: string;
+}
+
+/**
+ * Thumbnail component that displays either a post's thumbnail, a custom image, or a fallback icon.
+ *
+ * @since 3.18.0
+ *
+ * @param {ThumbnailProps} props Component props.
+ */
+export const Thumbnail = ( {
+	post,
+	imageUrl,
+	icon = page,
+	size = 100,
+	className = '',
+}: Readonly<ThumbnailProps> ): React.JSX.Element => {
+	const thumbnailUrl = post?.thumbnail ?? imageUrl;
+	const altText = post?.title.rendered ?? '';
+
+	return (
+		<div className={ `parsely-thumbnail ${ className }` } style={ { width: size, height: size } }>
+			{ thumbnailUrl ? (
+				<img
+					src={ thumbnailUrl }
+					alt={ altText }
+					width={ size }
+					height={ size }
+				/>
+			) : (
+				<div className="parsely-thumbnail-icon-container">
+					<Icon icon={ icon } size={ size } />
+				</div>
+			) }
+		</div>
+	);
+};

src/content-helper/common/components/thumbnail/index.ts

@@ -0,0 +1 @@
+export { Thumbnail } from './component';

src/content-helper/common/components/thumbnail/style.scss

@@ -0,0 +1,31 @@
+@import "../../css/functions";
+@import "../../css/variables";
+
+.parsely-thumbnail {
+	border-radius: 3px;
+	overflow: hidden;
+	flex-shrink: 0;
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 3px;
+	}
+
+	.parsely-thumbnail-icon-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background: var(--gray-500);
+		border-radius: 3px;
+
+		svg {
+			fill: var(--sidebar-white);
+			width: 60%;
+			height: 60%;
+		}
+	}
+}

src/content-helper/common/css/common.scss

@@ -7,6 +7,7 @@
 @import "../components/tone-selector/style";
 @import "../components/persona-selector/style";
 @import "../components/input-range/style";
+@import "../components/thumbnail/style";
 
 /**
  * Common styles for the content helper.

src/content-helper/common/css/variables.scss

@@ -45,6 +45,7 @@ $base-unit-60: 3rem; // 48px.
 	--parsely-green-65: hsla(109, 59%, 26%, 1);
 	--gray-200: #f7f8f9;
 	--gray-300: #edeeef;
+	--gray-350: #e1e3e5;
 	--gray-400: #d7dbdf;
 	--gray-500: #959da5;
 	--gray-600: #586069;