create-nextblock 0.0.1

package/templates/nextblock-template/components/ResponsiveNav.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+import Link from 'next/link';
+import React, { useState, useEffect, useMemo, useRef } from 'react'
+import type { Database } from '@nextblock-cms/db' // Relative path from components/
+import { useCurrentContent } from '../context/CurrentContentContext';
+import { useTranslations } from '@nextblock-cms/utils';
+
+type Logo = Database['public']['Tables']['logos']['Row'] & { media: (Database['public']['Tables']['media']['Row'] & { alt_text: string | null }) | null };
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+import Image from 'next/image'
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
+
+// Define a type for hierarchical navigation items
+interface HierarchicalNavigationItem extends NavigationItem {
+  children: HierarchicalNavigationItem[]
+}
+
+// SVG Icon for dropdowns/expandable sections
+const ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 01.02-1.06z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+
+// Utility function to build the hierarchy from a flat list
+const buildHierarchy = (
+  items: NavigationItem[],
+): HierarchicalNavigationItem[] => {
+  const hierarchy: HierarchicalNavigationItem[] = []
+  const itemMap: { [id: string]: HierarchicalNavigationItem } = {}
+
+  items.forEach(item => {
+    itemMap[item.id] = { ...item, children: [] }
+  })
+
+  items.forEach(item => {
+    if (item.parent_id && itemMap[item.parent_id]) {
+      itemMap[item.parent_id].children.push(itemMap[item.id])
+    } else {
+      // Add to root if no parent_id or parent_id not in map (handles orphaned items gracefully)
+      if (itemMap[item.id]) {
+        // Ensure item itself exists in map
+        hierarchy.push(itemMap[item.id])
+      }
+    }
+  })
+  return hierarchy
+}
+
+interface ResponsiveNavProps {
+  homeLinkHref: string
+  logo?: Logo | null
+  siteTitle: string
+  navItems: NavigationItem[]
+  canAccessCms: boolean;
+  cmsDashboardLinkHref: string;
+  headerAuthComponent: React.ReactNode;
+  languageSwitcherComponent: React.ReactNode;
+}
+
+export default function ResponsiveNav({
+  homeLinkHref,
+  navItems,
+  canAccessCms,
+  cmsDashboardLinkHref,
+  headerAuthComponent,
+  languageSwitcherComponent,
+  logo,
+  siteTitle,
+}: ResponsiveNavProps) {
+  const { t } = useTranslations();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [expandedMobileItems, setExpandedMobileItems] = useState<Record<string, boolean>>({});
+
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const menuContainerRef = useRef<HTMLDivElement>(null);
+
+  const hierarchicalNavItems = useMemo(() => buildHierarchy(navItems), [navItems]);
+  const { currentContent } = useCurrentContent();
+
+  let editPathDetails: { href: string; label: string } | null = null;
+
+  if (canAccessCms && currentContent.id && currentContent.type) {
+    if (currentContent.type === 'page') {
+      editPathDetails = {
+        href: `/cms/pages/${currentContent.id}/edit`,
+        label: t('edit_page'),
+      };
+    } else if (currentContent.type === 'post') {
+      editPathDetails = {
+        href: `/cms/posts/${currentContent.id}/edit`,
+        label: t('edit_post'),
+      };
+    }
+  }
+  // The old path-based logic for determining editPathDetails is removed
+  // as the context is now the source of truth for ID and type.
+  // The link will only show if canAccessCms is true and context provides valid id and type.
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+    // Optionally reset expanded submenus when main menu closes
+    // if (!isMobileMenuOpen) setExpandedMobileItems({});
+  };
+
+  const toggleMobileSubmenu = (itemId: string) => {
+    setExpandedMobileItems(prev => ({ ...prev, [itemId]: !prev[itemId] }));
+  };
+
+  useEffect(() => { // Added opening curly brace
+    const handleResize = () => {
+      if (window.innerWidth >= 768 && isMobileMenuOpen) { // Tailwind 'md' breakpoint is 768px
+        setIsMobileMenuOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isMobileMenuOpen]);
+
+  useEffect(() => {
+    const menuElement = menuContainerRef.current;
+    if (!menuElement) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      const focusableElements = menuElement.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])'
+      );
+
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (event.shiftKey) {
+        // Shift + Tab
+        if (document.activeElement === firstElement) {
+          lastElement.focus();
+          event.preventDefault();
+        }
+      } else {
+        // Tab
+        if (document.activeElement === lastElement) {
+          firstElement.focus();
+          event.preventDefault();
+        }
+      }
+    };
+
+    if (isMobileMenuOpen) {
+      const focusableElements = menuElement.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])'
+      );
+      
+      if (focusableElements.length > 0) {
+        focusableElements[0].focus();
+      }
+      
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      menuButtonRef.current?.focus();
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isMobileMenuOpen]);
+
+  const renderMobileNavItems = (items: HierarchicalNavigationItem[], level = 0): React.JSX.Element[] => {
+    return items.map(item => (
+      <div key={item.id} className={`${level > 0 ? 'ml-0' : ''}`}>
+        <div
+          className={`flex items-center justify-between w-full text-base font-medium text-foreground rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 ${level > 0 ? 'px-3 py-2' : 'px-3 py-2'}`}
+        >
+          {/* Only the label is a clickable link */}
+          <Link
+            href={item.url}
+            className="py-0 px-0 mr-2 focus:underline focus:outline-none"
+            onClick={() => {
+              toggleMobileMenu();
+            }}
+          >
+            {item.label}
+          </Link>
+          {/* If item has children, the rest of the row (whitespace + chevron) is a single button to toggle submenu */}
+          {item.children && item.children.length > 0 && (
+            <button
+              type="button"
+              className="flex flex-1 items-center h-full cursor-pointer bg-transparent border-none outline-none px-1 justify-end"
+              style={{ minWidth: 0 }}
+              aria-expanded={!!expandedMobileItems[String(item.id)]}
+              aria-label={`Toggle submenu for ${item.label}`}
+              onClick={e => {
+                e.stopPropagation();
+                toggleMobileSubmenu(String(item.id));
+              }}
+            >
+              <span className="flex-1" /> {/* whitespace filler, clickable */}
+              <ChevronDownIcon className={`h-5 w-5 transform transition-transform duration-200 ${expandedMobileItems[String(item.id)] ? 'rotate-180' : ''}`} />
+            </button>
+          )}
+        </div>
+        {item.children && item.children.length > 0 && expandedMobileItems[String(item.id)] && (
+          <div className="pl-[calc(0.75rem+0.5rem)] mt-1 mb-1 border-l-2 border-gray-300 dark:border-gray-600 ml-[calc(0.75rem+1px)] mr-3">
+            {renderMobileNavItems(item.children, level + 1)}
+          </div>
+        )}
+      </div>
+    ));
+  };
+
+  const renderDesktopNavItems = (items: HierarchicalNavigationItem[], isSubmenu = false): React.JSX.Element[] => {
+    return items.map(item => (
+      <div key={item.id} className={`relative group ${isSubmenu ? 'w-full' : ''}`}>
+        <Link
+          href={item.url}
+          className={`flex items-center justify-between hover:underline px-3 py-2 text-sm text-foreground ${isSubmenu ? 'w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md' : ''}`}
+        >
+          {item.label}
+          {item.children && item.children.length > 0 && (
+            <ChevronDownIcon className={`ml-1 h-4 w-4 transition-transform duration-200 group-hover:rotate-180 ${isSubmenu ? '' : ''}`} />
+          )}
+        </Link>
+        {item.children && item.children.length > 0 && (
+          <div
+            className={`
+              absolute top-full left-0 mt-0 w-56 bg-background border border-gray-200 dark:border-gray-700 rounded-md shadow-lg py-1
+              opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out z-50
+              ${isSubmenu ? 'left-full top-0 -mt-[2px] ml-0' : ''}
+            `}
+          > {/* -mt-[2px] to align better with parent item border */}
+            {renderDesktopNavItems(item.children, true)}
+          </div>
+        )}
+      </div>
+    ));
+  };
+
+  return (
+    <>
+      {/* Main container for desktop and mobile top bar elements */}
+      <div className="flex justify-between items-center w-full">
+        {/* Left side: Home link (visible on desktop and mobile) */}
+        <div className="flex items-center">
+          <Link
+            href={homeLinkHref}
+            className="flex items-center space-x-2 rtl:space-x-reverse"
+          >
+            {logo && logo.media ? (
+              <Image
+                src={`${R2_BASE_URL}/${logo.media.object_key}`}
+                alt={logo.media.alt_text || 'Home'}
+                width={logo.media.width || 100}
+                height={logo.media.height || 32}
+                className="h-14 w-auto object-contain"
+                priority
+              />
+            ) : (
+              <span className="text-xl font-semibold text-foreground">
+                {siteTitle}
+              </span>
+            )}
+          </Link>
+          {/* Desktop: Additional Nav items */}
+          <div className="hidden md:flex items-baseline font-semibold ml-6 space-x-1"> {/* Adjusted space-x for items with internal padding */}
+            {hierarchicalNavItems.length > 0 && renderDesktopNavItems(hierarchicalNavItems)}
+          </div>
+        </div>
+
+        {/* Right side: Auth, LangSwitcher (desktop), Hamburger (mobile) */}
+        <div className="hidden md:flex items-center space-x-4">
+          {canAccessCms && editPathDetails && (
+            <Link href={editPathDetails.href} className="hover:underline font-semibold text-sm text-foreground mr-3">
+              {editPathDetails.label}
+            </Link>
+          )}
+          {canAccessCms && (
+            <Link href={cmsDashboardLinkHref} className="hover:underline font-semibold text-sm text-foreground">
+              {t('cms_dashboard')}
+            </Link>
+          )}
+          {headerAuthComponent}
+          {languageSwitcherComponent}
+        </div>
+
+        <div className="md:hidden flex items-center z-[60]">
+          <button
+            ref={menuButtonRef}
+            onClick={toggleMobileMenu}
+            className="p-2 rounded-md text-foreground hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
+            aria-label={t('open_main_menu')}
+            aria-expanded={isMobileMenuOpen}
+          >
+            {isMobileMenuOpen ? (
+              <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            ) : (
+              <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Overlay for Mobile Menu - Fades In/Out */}
+      <div
+        className={`fixed inset-0 bg-black/50 backdrop-blur-sm z-40 transition-opacity ease-in-out duration-300 top-16 md:hidden ${
+          isMobileMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
+        }`}
+        onClick={toggleMobileMenu}
+        aria-hidden={!isMobileMenuOpen}
+      />
+
+      {/* Slide-in Mobile Menu Container (for the sliding content) */}
+      <div
+        ref={menuContainerRef}
+        className={`fixed inset-0 z-40 transform transition-transform ease-in-out duration-300 md:hidden ${
+          isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('mobile_navigation_menu')}
+      >
+        {/* Menu Content (this part slides with the container above) */}
+        <div className="fixed top-16 left-0 h-[calc(100vh-4rem)] w-full max-w-sm bg-background text-foreground shadow-xl p-5 z-50 flex flex-col">
+          <nav className="flex-grow flex flex-col space-y-1 overflow-y-auto pt-6"> 
+            {renderMobileNavItems(hierarchicalNavItems)}
+            {canAccessCms && editPathDetails && (
+              <Link
+                href={editPathDetails.href}
+                className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-gray-100 dark:hover:bg-gray-700"
+                onClick={() => {
+                  toggleMobileMenu();
+                }}
+              >
+                {editPathDetails.label}
+              </Link>
+            )}
+            {canAccessCms && (
+              <Link
+                href={cmsDashboardLinkHref}
+                className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-gray-100 dark:hover:bg-gray-700"
+                onClick={toggleMobileMenu}
+              >
+                {t('cms_dashboard')}
+              </Link>
+            )}
+          </nav>
+
+          <div className="mt-auto pt-6 border-t border-foreground/20 space-y-4">
+            <div >{headerAuthComponent}</div>
+            <div >{languageSwitcherComponent}</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/nextblock-template/components/blocks/PostCardSkeleton.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@nextblock-cms/ui";
+
+const PostCardSkeleton = () => {
+  return (
+    <div className="border rounded-lg overflow-hidden shadow-sm bg-card text-card-foreground">
+      <Skeleton className="h-48 w-full" />
+      <div className="p-4 space-y-3">
+        <Skeleton className="h-5 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6" />
+        <Skeleton className="h-4 w-1/4 mt-2" />
+      </div>
+    </div>
+  );
+};
+
+export default PostCardSkeleton;

package/templates/nextblock-template/components/blocks/PostsGridBlock.tsx

@@ -0,0 +1,93 @@
+// components/blocks/PostsGridBlock.tsx
+import React from 'react';
+import type { Database } from '@nextblock-cms/db';
+import { createClient } from '@nextblock-cms/db'; // Added import
+import type { PostWithMediaDimensions } from './types';
+
+type Block = Database['public']['Tables']['blocks']['Row'];
+// import Link from 'next/link'; // Unused, PostsGridClient handles links
+import PostsGridClient from './PostsGridClient';
+import { fetchPaginatedPublishedPosts } from '../../app/actions/postActions'; // fetchInitialPublishedPosts removed
+
+interface PostsGridBlockProps {
+  block: Block;
+  languageId: number;
+}
+
+const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId }) => {
+  const {
+    title = "Recent Posts",
+    postsPerPage = 12,
+    columns = 3,
+    showPagination = true,
+  } = block.content as { title?: string, postsPerPage?: number, columns?: number, showPagination?: boolean };
+
+  const supabase = createClient();
+
+  const { data: postsData, error: queryError, count } = await supabase
+    .from('posts')
+    .select('id, title, slug, excerpt, published_at, language_id, status, created_at, updated_at, translation_group_id, feature_image_id, feature_media_object:media!feature_image_id(object_key, width, height)', { count: 'exact' })
+    .eq('status', 'published')
+    .eq('language_id', languageId)
+    .order('published_at', { ascending: false })
+    .limit(postsPerPage);
+
+  let initialPosts: PostWithMediaDimensions[] = [];
+  let totalCount = 0;
+  let postsError: string | null = null;
+
+  if (queryError) {
+    console.error("Error fetching initial posts directly in PostsGridBlock:", queryError);
+    postsError = queryError.message;
+  } else {
+    initialPosts = (postsData as any)?.map((p: any) => {
+      // feature_media_object is an object here, not an array, due to the query structure media!feature_image_id(object_key, width, height)
+      // Cast to 'unknown' then to the expected single object type to satisfy TypeScript, reflecting runtime reality.
+      const mediaObject = p.feature_media_object as unknown as { object_key: string; width?: number | null; height?: number | null; blur_data_url?: string | null } | null;
+      const imageUrl = mediaObject?.object_key
+        ? `${process.env.NEXT_PUBLIC_R2_BASE_URL}/${mediaObject.object_key}`
+        : null;
+      return {
+        ...p,
+        // Convert feature_media_object to array format to match the type
+        feature_media_object: mediaObject ? [{ object_key: mediaObject.object_key }] : null,
+        feature_image_url: imageUrl,
+        feature_image_width: mediaObject?.width || null,
+        feature_image_height: mediaObject?.height || null,
+        blur_data_url: mediaObject?.blur_data_url || null,
+      };
+    }) as PostWithMediaDimensions[] || [];
+    totalCount = count || 0;
+  }
+
+  if (postsError) {
+    return <div className="text-red-500">Error loading posts: {postsError}</div>;
+  }
+
+  if (!initialPosts || initialPosts.length === 0) {
+    return (
+      <section className="py-8 container mx-auto">
+        {title && <h2 className="text-2xl font-semibold mb-4">{title}</h2>}
+        <p>No posts found.</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-8 container mx-auto">
+      {title && <h2 className="text-2xl font-semibold mb-6">{title}</h2>}
+      <PostsGridClient
+        initialPosts={initialPosts}
+        initialPage={1}
+        postsPerPage={postsPerPage}
+        totalCount={totalCount}
+        columns={columns}
+        languageId={languageId}
+        showPagination={showPagination}
+        fetchAction={fetchPaginatedPublishedPosts} // Pass the server action for pagination
+      />
+    </section>
+  );
+};
+
+export default PostsGridBlock;

package/templates/nextblock-template/components/blocks/PostsGridClient.tsx

@@ -0,0 +1,180 @@
+// components/blocks/PostsGridClient.tsx
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import type { Database } from '@nextblock-cms/db';
+import Link from 'next/link';
+
+type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
+    feature_image_url: string | null;
+    feature_image_width: number | null;
+    feature_image_height: number | null;
+    blur_data_url: string | null;
+};
+import Image from 'next/image';
+import { Button } from '@nextblock-cms/ui'; // Adjusted path
+import PostCardSkeleton from './PostCardSkeleton'; // Added import
+
+interface PostsGridClientProps {
+  initialPosts: PostWithMediaDimensions[];
+  initialPage: number;
+  postsPerPage: number;
+  totalCount: number;
+  columns: number;
+  languageId: number;
+  showPagination: boolean;
+  fetchAction: (languageId: number, page: number, limit: number) => Promise<{ posts: PostWithMediaDimensions[], totalCount: number, error?: string }>;
+}
+
+const PostsGridClient: React.FC<PostsGridClientProps> = ({
+  initialPosts,
+  initialPage,
+  postsPerPage,
+  totalCount,
+  columns,
+  languageId,
+  showPagination,
+  fetchAction,
+}) => {
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [posts, setPosts] = useState<PostWithMediaDimensions[]>(initialPosts);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Initialize skeletonCount to postsPerPage, or a sensible minimum if initialPosts is empty.
+  const [skeletonCount, setSkeletonCount] = useState(initialPosts.length > 0 ? initialPosts.length : postsPerPage);
+
+  const totalPages = Math.ceil(totalCount / postsPerPage);
+
+  useEffect(() => {
+    setPosts(initialPosts); // Sync if initialPosts change due to parent re-render
+    setCurrentPage(initialPage);
+    // When initialPosts change, update skeletonCount to reflect the number of items actually rendered initially,
+    // or fall back to postsPerPage if initialPosts is empty (e.g., for a client-side initial fetch)
+    setSkeletonCount(initialPosts.length > 0 ? initialPosts.length : postsPerPage);
+  }, [initialPosts, initialPage, postsPerPage]);
+
+  const handlePageChange = async (newPage: number) => {
+    if (newPage < 1 || newPage > totalPages || isLoading) return;
+    
+    // For subsequent page loads, always show `postsPerPage` skeletons
+    setSkeletonCount(postsPerPage);
+    setIsLoading(true);
+    setError(null);
+    // Don't clear posts here immediately, skeletons will cover the loading state
+    try {
+      const result = await fetchAction(languageId, newPage, postsPerPage);
+
+      if (result.error) {
+        setError(result.error);
+        setPosts([]); // Clear posts on error
+      } else {
+        setPosts(result.posts);
+        setCurrentPage(newPage);
+      }
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to fetch posts.");
+      setPosts([]); // Clear posts on error
+    }
+    setIsLoading(false);
+  };
+
+  const columnClasses: { [key: number]: string } = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+  };
+  const gridColsClass = columnClasses[columns] || columnClasses[3];
+
+  const getImageSizes = (cols: number): string => {
+    switch (cols) {
+      case 1:
+        return '100vw';
+      case 2:
+        return '(max-width: 767px) 100vw, 50vw';
+      case 4:
+        return '(max-width: 639px) 100vw, (max-width: 767px) 50vw, (max-width: 1023px) 33vw, 25vw';
+      case 3:
+      default:
+        return '(max-width: 767px) 100vw, (max-width: 1023px) 50vw, 33vw';
+    }
+  };
+
+  const imageSizes = getImageSizes(columns);
+
+  if (error && !isLoading) { // Only show full error if not also loading (e.g. initial load error after skeletons)
+    return <div className="text-red-500 py-10 text-center">Error: {error}</div>;
+  }
+
+  return (
+    <div>
+      <div className={`grid ${gridColsClass} gap-6`}>
+        {isLoading ? (
+          Array.from({ length: skeletonCount }).map((_, index) => (
+            <PostCardSkeleton key={`skeleton-${index}`} />
+          ))
+        ) : posts.length > 0 ? (
+          posts.map((post, index) => (
+            <Link href={`/blog/${post.slug}`} key={post.id} className="block group">
+              <div className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card text-card-foreground">
+                {/* Basic Post Card Structure - Enhanced with Feature Image */}
+                {post.feature_image_url && typeof post.feature_image_width === 'number' && typeof post.feature_image_height === 'number' && post.feature_image_width > 0 && post.feature_image_height > 0 ? (
+                  <div className="aspect-video overflow-hidden"> {/* Or other aspect ratio as desired, e.g., aspect-[16/9] or aspect-square */}
+                    <Image
+                      src={post.feature_image_url}
+                      alt={`Feature image for ${post.title}`}
+                      width={post.feature_image_width}
+                      height={post.feature_image_height}
+                      sizes={imageSizes}
+                      priority={index === 0}
+                      placeholder={post.blur_data_url ? 'blur' : 'empty'}
+                      blurDataURL={post.blur_data_url ?? undefined}
+                      quality={60}
+                      className="h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                  </div>
+                ) : post.feature_image_url ? (
+                  <div className="aspect-video overflow-hidden bg-gray-200 flex items-center justify-center">
+                    <span className="text-gray-500">Image not available</span>
+                  </div>
+                ) : null}
+                <div className="p-4">
+                  <h3 className="text-lg font-semibold mb-2 group-hover:text-primary">{post.title}</h3>
+                  {post.excerpt && <p className="text-sm text-muted-foreground mb-3 line-clamp-3">{post.excerpt}</p>}
+                  <span className="text-xs text-primary group-hover:underline">Read more</span>
+                </div>
+              </div>
+            </Link>
+          ))
+        ) : (
+          !error && <div className="col-span-full text-center py-10">No posts found.</div> // Show if no posts and no error, and not loading
+        )}
+      </div>
+
+      {showPagination && totalPages > 1 && (
+        <div className="flex justify-center items-center mt-8 space-x-2">
+          <Button
+            onClick={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage === 1 || isLoading}
+            variant="outline"
+          >
+            Previous
+          </Button>
+          <span className="text-sm">
+            Page {currentPage} of {totalPages}
+          </span>
+          <Button
+            onClick={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage === totalPages || isLoading}
+            variant="outline"
+          >
+            Next
+          </Button>
+        </div>
+      )}
+      {/* {isLoading && <p className="text-center mt-4 text-sm text-muted-foreground">Fetching posts...</p>} */}
+    </div>
+  );
+};
+
+export default PostsGridClient;