Convert from JSX to TSX

app/components/ContentThumbnailTemplate.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import React, { memo } from "react";
+import Link from "next/link";
+import ContentContainer from "./ContentContainer";
+import { getAssetPath, ASSETS } from "../../lib/assetUtils";
+import type { BlogPost } from "../../lib/content";
+
+/**
+ * ContentThumbnailTemplate component for displaying blog post previews
+ * Simplified version to debug infinite loop
+ */
+interface ContentThumbnailTemplateProps {
+  post: BlogPost;
+  className?: string;
+  variant?: "vertical" | "horizontal";
+  slugOrder?: string[];
+}
+
+const ContentThumbnailTemplate = memo<ContentThumbnailTemplateProps>(
+  ({ post, className = "", variant = "vertical", slugOrder }) => {
+    // Get article-specific background image from frontmatter
+    const getBackgroundImage = (
+      post: BlogPost,
+      variant: "vertical" | "horizontal"
+    ): string => {
+      // Check if post has thumbnail images defined in frontmatter
+      if (post.frontmatter?.thumbnail) {
+        const imageName =
+          variant === "vertical"
+            ? post.frontmatter.thumbnail.vertical
+            : post.frontmatter.thumbnail.horizontal;
+
+        if (imageName) {
+          // Return path to image in public/content/blog directory
+          return `/content/blog/${imageName}`;
+        }
+      }
+
+      // Fallback to default images if no thumbnail specified
+      const fallbackImages: Record<string, string> = {
+        vertical: getAssetPath(ASSETS.VERTICAL_1),
+        horizontal: getAssetPath(ASSETS.HORIZONTAL_1),
+      };
+
+      return fallbackImages[variant] || fallbackImages.vertical;
+    };
+
+    const backgroundImage = getBackgroundImage(post, variant);
+
+    if (variant === "vertical") {
+      return (
+        <Link
+          href={`/blog/${post.slug}`}
+          className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+        >
+          <div className="relative w-full aspect-[2/3] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
+            {/* Background SVG - fills container with maintained aspect */}
+            <div className="absolute inset-0 z-0">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={backgroundImage}
+                alt={`Background for ${post.frontmatter.title}`}
+                className="w-full h-full object-cover"
+              />
+              {/* Gradient overlay for better text readability */}
+              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10" />
+            </div>
+
+            {/* Content Section - positioned within the padding constraints */}
+            <ContentContainer post={post} width="200px" size="xs" />
+          </div>
+        </Link>
+      );
+    }
+
+    // Horizontal variant
+    return (
+      <Link
+        href={`/blog/${post.slug}`}
+        className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+      >
+        <div className="relative min-w-[320px] max-w-[800px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
+          {/* Background SVG - sized to fit the 320x225.5 container exactly */}
+          <div className="absolute inset-0 z-0">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={backgroundImage}
+              alt={`Background for ${post.frontmatter.title}`}
+              className="w-full h-[225.5px] object-cover"
+            />
+            {/* Gradient overlay */}
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
+          </div>
+
+          {/* Content - positioned within the padding constraints */}
+          <ContentContainer post={post} width="230px" size="xs" />
+        </div>
+      </Link>
+    );
+  }
+);
+
+ContentThumbnailTemplate.displayName = "ContentThumbnailTemplate";
+
+export default ContentThumbnailTemplate;