create-nextblock 0.2.78 → 0.8.0

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

@@ -1,11 +1,12 @@
 // components/LanguageSwitcher.tsx
 'use client';
 
-import { useLanguage } from '@/context/LanguageContext';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
+import { useLanguage } from '../context/LanguageContext';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
 import { useRouter, usePathname } from 'next/navigation';
-import { getPageTranslations, getPageMetadataBySlugAndLocale } from '@/app/actions/languageActions';
-import type { Language } from '@/app/actions/languageActions';
+import { getContentTranslations, getContentMetadataBySlugAndLocale } from '../app/actions/languageActions';
+import { Language } from '../app/actions/languageActions';
+import { useCurrentContent } from '../context/CurrentContentContext';
 
 interface CurrentPageInfo {
   slug: string;
@@ -17,6 +18,7 @@ interface LanguageSwitcherProps {
 }
 
 export default function LanguageSwitcher({ currentPageData }: LanguageSwitcherProps) {
+  const { currentContent } = useCurrentContent();
   const { currentLocale, setCurrentLocale, availableLanguages, isLoadingLanguages } = useLanguage();
   const router = useRouter();
   const pathname = usePathname();
@@ -36,47 +38,68 @@ export default function LanguageSwitcher({ currentPageData }: LanguageSwitcherPr
     if (isHomePage) {
       targetPath = '/'; // For any homepage, new language path is root
     } else {
-      // Extract slug from pathname (remove leading slash)
-      const currentSlug = pathname.startsWith('/') ? pathname.slice(1) : pathname;
-      
-      let pageMetadata = currentPageData;
-      
-      // If currentPageData is not provided, try to fetch it
-      if (!pageMetadata && currentSlug) {
-        try {
-          const fetchedMetadata = await getPageMetadataBySlugAndLocale(currentSlug, currentLocale);
-          if (fetchedMetadata) {
-            pageMetadata = fetchedMetadata;
-          }
-        } catch (error) {
-          console.error('Error fetching current page metadata:', error);
+    // Extract slug from pathname (remove leading slash)
+    const segments = pathname.split('/').filter(Boolean);
+    const currentSlug = segments[segments.length - 1] || '';
+    
+    let contentMetadata = currentContent.id ? { 
+      slug: currentContent.slug || '', 
+      translation_group_id: currentContent.translation_group_id || null,
+      type: currentContent.type
+    } : null;
+    
+    // Fallback to fetching if context is missing but we have a slug
+    if (!contentMetadata && currentSlug && !isHomePage) {
+      try {
+        // Try pages first, then products, then posts? 
+        // Or determine from pathname prefix
+        let type: 'pages' | 'posts' | 'products' = 'pages';
+        if (pathname.includes('/product/')) type = 'products';
+        if (pathname.includes('/article/')) type = 'posts';
+
+        const fetchedMetadata = await getContentMetadataBySlugAndLocale(currentSlug, currentLocale, type);
+        if (fetchedMetadata) {
+          contentMetadata = fetchedMetadata as any;
         }
+      } catch (error) {
+        console.error('Error fetching content metadata:', error);
       }
+    }
 
-      if (pageMetadata?.translation_group_id) {
-        try {
-          const translations = await getPageTranslations(pageMetadata.translation_group_id);
-          const foundTranslation = translations.find(t => t.language_code === newLocaleCode);
+    if (contentMetadata?.translation_group_id) {
+      try {
+        const typePlural = contentMetadata.type === 'product' ? 'products' : (contentMetadata.type === 'post' ? 'posts' : 'pages');
+        const translations = await getContentTranslations(contentMetadata.translation_group_id, typePlural);
+        const foundTranslation = translations.find(t => t.language_code === newLocaleCode);
 
-          if (foundTranslation) {
-            targetPath = `/${foundTranslation.slug}`;
+        if (foundTranslation) {
+          // Construct target path based on type
+          if (contentMetadata.type === 'product') {
+            targetPath = `/product/${foundTranslation.slug}`;
+          } else if (contentMetadata.type === 'post') {
+            targetPath = `/article/${foundTranslation.slug}`;
           } else {
-            // Original warning, without the [LanguageSwitcher] prefix
-            console.warn(`No translation found for ${pageMetadata.slug} to ${newLocaleCode}. Falling back to current path.`);
+            targetPath = `/${foundTranslation.slug}`;
           }
-        } catch (error) {
-          // Original error, without the [LanguageSwitcher] prefix
-          console.error("Error fetching page translations:", error);
+        } else {
+          console.warn(`No translation found for ${contentMetadata.slug} to ${newLocaleCode}. Falling back to current path.`);
         }
-      } else {
-        // Original warning, without the [LanguageSwitcher] prefix
-        console.warn(`No translation_group_id for page: ${pageMetadata?.slug || currentSlug}. Current path will be used.`);
+      } catch (error) {
+        console.error("Error fetching translations:", error);
       }
+    } else if (!isHomePage) {
+      console.warn(`No translation_group_id for content: ${contentMetadata?.slug || currentSlug}. Current path will be used.`);
+    }
     }
 
     setTimeout(() => {
       if (pathname !== targetPath) {
         router.push(targetPath);
+        // Force Next.js to re-fetch the root layout since the language cookie changed.
+        // This ensures the Header/Footer navigation links update accurately.
+        setTimeout(() => {
+           router.refresh();
+        }, 50);
       } else {
         // If path is the same, refresh to ensure content updates for the new locale
         router.refresh();

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

@@ -1,17 +1,20 @@
 "use client";
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 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';
+import { useCurrentContent } from '../context/CurrentContentContext';
+import { useTranslations } from '@nextblock-cms/utils';
+import { DeferredGlobalSearch } from './DeferredGlobalSearch';
+import { resolveMediaUrl } from '../lib/media/resolveMediaUrl';
 
 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 || '';
-const FALLBACK_LOGO_PATH = '/images/nextblock-logo-small.webp';
+import Image from 'next/image'
+import { EyeOff, FilePenLine, Pencil } from 'lucide-react';
+
+const FALLBACK_LOGO_PATH = '/images/nextblock-logo-small.webp';
 
 // Define a type for hierarchical navigation items
 interface HierarchicalNavigationItem extends NavigationItem {
@@ -66,8 +69,22 @@ interface ResponsiveNavProps {
   navItems: NavigationItem[]
   canAccessCms: boolean;
   cmsDashboardLinkHref: string;
-  headerAuthComponent: React.ReactNode;
-  languageSwitcherComponent: React.ReactNode;
+  isDraftModeEnabled: boolean;
+  renderHeaderAuth: () => React.ReactNode;
+  renderLanguageSwitcher: () => React.ReactNode;
+  renderCurrencySwitcher?: () => React.ReactNode;
+  renderCartIcon?: () => React.ReactNode;
+  isEcommerceActive?: boolean;
+}
+
+function ClientOnly({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted ? <>{children}</> : null;
 }
 
 export default function ResponsiveNav({
@@ -75,22 +92,39 @@ export default function ResponsiveNav({
   navItems,
   canAccessCms,
   cmsDashboardLinkHref,
-  headerAuthComponent,
-  languageSwitcherComponent,
+  isDraftModeEnabled,
+  renderHeaderAuth,
+  renderLanguageSwitcher,
+  renderCurrencySwitcher,
   logo,
   siteTitle,
+  renderCartIcon,
+  isEcommerceActive = false,
 }: ResponsiveNavProps) {
   const { t } = useTranslations();
+  const pathname = usePathname() || '/';
   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 activeNavItems = useMemo(() => {
+    if (isEcommerceActive) return navItems;
+    return navItems.filter(item => {
+      const href = item.url.toLowerCase();
+      if (href.startsWith('/product') || href.startsWith('/checkout') || href.startsWith('/shop') || href.startsWith('/cart')) {
+        return false;
+      }
+      return true;
+    });
+  }, [navItems, isEcommerceActive]);
+
+  const hierarchicalNavItems = useMemo(() => buildHierarchy(activeNavItems), [activeNavItems]);
   const { currentContent } = useCurrentContent();
 
   let editPathDetails: { href: string; label: string } | null = null;
+  let draftModeDetails: { href: string; label: string; ariaLabel: string } | null = null;
 
   if (canAccessCms && currentContent.id && currentContent.type) {
     if (currentContent.type === 'page') {
@@ -103,8 +137,32 @@ export default function ResponsiveNav({
         href: `/cms/posts/${currentContent.id}/edit`,
         label: t('edit_post'),
       };
+    } else if (currentContent.type === 'product') {
+      editPathDetails = {
+        href: `/cms/products/${currentContent.id}/edit`,
+        label: t('edit_product'),
+      };
     }
   }
+
+  const canToggleDraftForCurrentContent =
+    canAccessCms &&
+    Boolean(currentContent.id) &&
+    (currentContent.type === 'page' ||
+      currentContent.type === 'post' ||
+      currentContent.type === 'product') &&
+    !pathname.startsWith('/cms');
+
+  if (canToggleDraftForCurrentContent) {
+    const draftRoute = isDraftModeEnabled ? '/api/draft/disable' : '/api/draft/start';
+    draftModeDetails = {
+      href: `${draftRoute}?path=${encodeURIComponent(pathname)}`,
+      label: isDraftModeEnabled ? 'Exit Draft' : 'Draft',
+      ariaLabel: isDraftModeEnabled
+        ? 'Exit draft mode'
+        : `Enable draft mode for this ${currentContent.type}`,
+    };
+  }
   // 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.
@@ -259,17 +317,13 @@ export default function ResponsiveNav({
             href={homeLinkHref}
             className="flex items-center space-x-2 rtl:space-x-reverse"
           >
-            {logo && logo.media ? (
-              <Image
-                src={
-                  logo.media.object_key.startsWith('/') || logo.media.object_key.startsWith('http')
-                    ? logo.media.object_key
-                    : `${R2_BASE_URL}/${logo.media.object_key}`
-                }
-                alt={logo.media.alt_text || siteTitle || 'Nextblock'}
-                width={logo.media.width || 100}
-                height={logo.media.height || 32}
-                className="h-14 w-auto object-contain"
+            {logo && logo.media ? (
+              <Image
+                src={resolveMediaUrl(logo.media.object_key) || FALLBACK_LOGO_PATH}
+                alt={logo.media.alt_text || siteTitle || 'Nextblock'}
+                width={logo.media.width || 100}
+                height={logo.media.height || 32}
+                className="h-14 w-auto object-contain" style={{ width: 'auto', height: '56px' }}
                 priority
               />
             ) : (
@@ -278,7 +332,7 @@ export default function ResponsiveNav({
                 alt={siteTitle || 'Nextblock'}
                 width={120}
                 height={40}
-                className="h-14 w-auto object-contain"
+                className="h-14 w-auto object-contain" style={{ width: 'auto', height: '56px' }}
                 priority
               />
             )}
@@ -290,22 +344,44 @@ export default function ResponsiveNav({
         </div>
 
         {/* Right side: Auth, LangSwitcher (desktop), Hamburger (mobile) */}
-        <div className="hidden md:flex items-center space-x-4">
+        <div className="hidden min-h-10 items-center gap-4 md:flex">
+          {draftModeDetails && (
+            <a
+              href={draftModeDetails.href}
+              aria-label={draftModeDetails.ariaLabel}
+              className={`flex items-center rounded-md px-3 py-2 text-sm font-semibold transition-colors ${
+                isDraftModeEnabled
+                  ? 'bg-amber-500 text-white hover:bg-amber-600'
+                  : 'text-foreground hover:bg-gray-100 dark:hover:bg-gray-800'
+              }`}
+            >
+              {isDraftModeEnabled ? (
+                <EyeOff className="mr-2 h-4 w-4" />
+              ) : (
+                <FilePenLine className="mr-2 h-4 w-4" />
+              )}
+              {draftModeDetails.label}
+            </a>
+          )}
           {canAccessCms && editPathDetails && (
-            <Link href={editPathDetails.href} className="hover:underline font-semibold text-sm text-foreground mr-3">
+            <Link href={editPathDetails.href} className="hover:underline font-semibold text-sm text-foreground mr-3 flex items-center">
+              <Pencil className="w-4 h-4 mr-2" />
               {editPathDetails.label}
             </Link>
           )}
-          {canAccessCms && (
-            <Link href={cmsDashboardLinkHref} className="hover:underline font-semibold text-sm text-foreground">
-              {t('cms_dashboard')}
-            </Link>
-          )}
-          {headerAuthComponent}
-          {languageSwitcherComponent}
+          <ClientOnly>
+            <DeferredGlobalSearch isEcommerceActive={isEcommerceActive} variant="desktop" />
+            {renderHeaderAuth()}
+            {renderLanguageSwitcher()}
+            {renderCurrencySwitcher?.()}
+            {renderCartIcon?.()}
+          </ClientOnly>
         </div>
 
-        <div className="md:hidden flex items-center z-[60]">
+        <div className="md:hidden flex items-center gap-2 z-[60]">
+          <ClientOnly>
+            <DeferredGlobalSearch isEcommerceActive={isEcommerceActive} variant="mobile" />
+          </ClientOnly>
           <button
             ref={menuButtonRef}
             onClick={toggleMobileMenu}
@@ -354,31 +430,50 @@ export default function ResponsiveNav({
             
             {canAccessCms && (
               <div className="mt-auto space-y-1 border-t border-gray-200 dark:border-gray-800">
+                {draftModeDetails && (
+                  <a
+                    href={draftModeDetails.href}
+                    aria-label={draftModeDetails.ariaLabel}
+                    className={`flex items-center rounded-md px-3 py-2 text-base font-medium ${
+                      isDraftModeEnabled
+                        ? 'bg-amber-500 text-white hover:bg-amber-600'
+                        : 'text-foreground hover:bg-gray-100 dark:hover:bg-gray-700'
+                    }`}
+                    onClick={() => {
+                      toggleMobileMenu();
+                    }}
+                  >
+                    {isDraftModeEnabled ? (
+                      <EyeOff className="mr-2 h-4 w-4" />
+                    ) : (
+                      <FilePenLine className="mr-2 h-4 w-4" />
+                    )}
+                    {draftModeDetails.label}
+                  </a>
+                )}
                 {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"
+                    className="flex items-center px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-gray-100 dark:hover:bg-gray-700"
                     onClick={() => {
                       toggleMobileMenu();
                     }}
                   >
+                    <Pencil className="w-4 h-4 mr-2" />
                     {editPathDetails.label}
                   </Link>
                 )}
-                <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>
               </div>
             )}
           </nav>
 
           <div className="mt-auto pt-6 border-t border-foreground/20 space-y-4">
-            <div >{headerAuthComponent}</div>
-            <div >{languageSwitcherComponent}</div>
+            <ClientOnly>
+              <div>{renderHeaderAuth()}</div>
+              <div>{renderCartIcon?.()}</div>
+              <div>{renderCurrencySwitcher?.()}</div>
+              <div>{renderLanguageSwitcher()}</div>
+            </ClientOnly>
           </div>
         </div>
       </div>

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

@@ -1,17 +1,21 @@
-import { Skeleton } from "@nextblock-cms/ui";
+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" />
+    <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">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-6 w-20 rounded-full" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <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;
+export default PostCardSkeleton;

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

@@ -1,13 +1,11 @@
 // 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
+import React from 'react';
+import type { Database } from '@nextblock-cms/db';
+
+type Block = Database['public']['Tables']['blocks']['Row'];
+// import Link from 'next/link'; // Unused, PostsGridClient handles links
+import PostsGridClient from './PostsGridClient';
+import { fetchInitialPublishedPosts, fetchPaginatedPublishedPosts } from '../../app/actions/postActions';
 
 interface PostsGridBlockProps {
   block: Block;
@@ -22,52 +20,11 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
     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 {
-    const buildMediaUrl = (objectKey?: string | null) => {
-      if (!objectKey) return null;
-      if (objectKey.startsWith('/')) return objectKey;
-      const base = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
-      return base ? `${base}/${objectKey}` : objectKey;
-    };
-
-    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 = buildMediaUrl(mediaObject?.object_key);
-      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>;
-  }
+  const { posts: initialPosts, totalCount, error: postsError } = await fetchInitialPublishedPosts(languageId, postsPerPage);
+
+  if (postsError) {
+    return <div className="text-red-500">Error loading posts: {postsError}</div>;
+  }
 
   if (!initialPosts || initialPosts.length === 0) {
     return (

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

@@ -1,18 +1,12 @@
 // 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 React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useLanguage } from '../../context/LanguageContext';
+import type { PostWithMediaDimensions } from './types';
 import Image from 'next/image';
-import { Button } from '@nextblock-cms/ui'; // Adjusted path
+import { Button } from '@nextblock-cms/ui';
 import PostCardSkeleton from './PostCardSkeleton'; // Added import
 
 interface PostsGridClientProps {
@@ -26,10 +20,10 @@ interface PostsGridClientProps {
   fetchAction: (languageId: number, page: number, limit: number) => Promise<{ posts: PostWithMediaDimensions[], totalCount: number, error?: string }>;
 }
 
-const DEFAULT_FEATURE_IMAGE_WIDTH = 1600;
-const DEFAULT_FEATURE_IMAGE_HEIGHT = 900;
-
-const PostsGridClient: React.FC<PostsGridClientProps> = ({
+const DEFAULT_FEATURE_IMAGE_WIDTH = 1600;
+const DEFAULT_FEATURE_IMAGE_HEIGHT = 900;
+
+const PostsGridClient: React.FC<PostsGridClientProps> = ({
   initialPosts,
   initialPage,
   postsPerPage,
@@ -39,6 +33,7 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
   showPagination,
   fetchAction,
 }) => {
+  const { currentLocale } = useLanguage();
   const [currentPage, setCurrentPage] = useState(initialPage);
   const [posts, setPosts] = useState<PostWithMediaDimensions[]>(initialPosts);
   const [isLoading, setIsLoading] = useState(false);
@@ -117,30 +112,40 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
             <PostCardSkeleton key={`skeleton-${index}`} />
           ))
         ) : posts.length > 0 ? (
-          posts.map((post, index) => (
-            <Link href={`/article/${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">
+          posts.map((post) => (
+            <Link href={`/article/${post.slug}`} key={post.id} className="block group h-full">
+              <div className="border rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card text-card-foreground h-full flex flex-col">
                 {/* Basic Post Card Structure - Enhanced with Feature Image */}
-                {post.feature_image_url ? (
-                  <div className="aspect-video overflow-hidden">
-                    <Image
-                      src={post.feature_image_url}
-                      alt={`Feature image for ${post.title}`}
-                      width={post.feature_image_width && post.feature_image_width > 0 ? post.feature_image_width : DEFAULT_FEATURE_IMAGE_WIDTH}
-                      height={post.feature_image_height && post.feature_image_height > 0 ? post.feature_image_height : DEFAULT_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 w-full object-cover transition-transform duration-300 group-hover:scale-105"
-                    />
-                  </div>
-                ) : null}
-                <div className="p-4">
+                {post.feature_image_url ? (
+                  <div className="aspect-video overflow-hidden">
+                    <Image
+                      src={post.feature_image_url}
+                      alt={`Feature image for ${post.title}`}
+                      width={post.feature_image_width && post.feature_image_width > 0 ? post.feature_image_width : DEFAULT_FEATURE_IMAGE_WIDTH}
+                      height={post.feature_image_height && post.feature_image_height > 0 ? post.feature_image_height : DEFAULT_FEATURE_IMAGE_HEIGHT}
+                      sizes={imageSizes}
+                      loading="lazy"
+                      placeholder={post.blur_data_url ? 'blur' : 'empty'}
+                      blurDataURL={post.blur_data_url ?? undefined}
+                      quality={60}
+                      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                  </div>
+                ) : null}
+                <div className="p-4 flex flex-1 flex-col">
+                  <div className="mb-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                    <span className="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 font-semibold text-slate-700">
+                      {post.label?.trim() || 'Article'}
+                    </span>
+                    <span>
+                      {post.estimated_read_time_minutes} {currentLocale === 'fr' ? 'min de lecture' : 'min read'}
+                    </span>
+                  </div>
                   <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 className="mt-auto pt-2">
+                    <span className="text-xs text-primary group-hover:underline">Read more</span>
+                  </div>
                 </div>
               </div>
             </Link>
@@ -176,4 +181,4 @@ const PostsGridClient: React.FC<PostsGridClientProps> = ({
   );
 };
 
-export default PostsGridClient;
+export default PostsGridClient;

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

@@ -1,7 +1,11 @@
 import React from 'react';
-import { z } from 'zod';
+import { z } from '../../lib/zod-config';
 import { BlockConfig, BlockProps, BlockEditorProps } from '@nextblock-cms/sdk';
-import { Card, CardContent, Avatar, AvatarImage, AvatarFallback, Input, Label, Textarea } from '@nextblock-cms/ui';
+import { Avatar, AvatarFallback, AvatarImage } from '@nextblock-cms/ui';
+import { Card, CardContent } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import { Textarea } from '@nextblock-cms/ui';
 import { MessageSquareQuote } from 'lucide-react';
 
 // 1. Define the Schema